web16(ColorBox插件编写)
生活随笔
收集整理的這篇文章主要介紹了
web16(ColorBox插件编写)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
自定義插件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>仿colorbox效果的插件</title><style>img{width: 200px;}</style> </head> <body><img src="../images/a1.jpg" data-myColorBox=""> <img src="../images/a2.jpg" data-myColorBox=""> <img src="../images/a3.jpg" data-myColorBox=""> <img src="../images/a4.jpg" data-myColorBox=""> <img src="../images/a5.jpg" data-myColorBox=""> <img src="../images/a6.jpg" data-myColorBox=""> <img src="../images/0.webp" data-myColorBox=""> <img src="../images/1.webp" data-myColorBox=""> <img src="../images/2.webp" data-myColorBox="a"> <img src="../images/3.webp" data-myColorBox="a"> <img src="../images/4.webp" data-myColorBox=""><script src="../js/jquery-3.4.1.min.js"></script> <script src="../js/jQuery.myColorBox-1.0.0.js"></script> <script>$(function () {// $('img').myColorBox();$.myColorBox();})// //圖片預(yù)加載// var img = new Image();// img.src = 'xxxx';// </script></body> </html>自定義的json
!(function ($) {$.myColorBox = function (userArg) {var arg = {};$.extend(arg,userArg);//建立遮罩層var maskLayer;//建立圖片的顯示層（遮罩層上面那一層）var viewLayer;//定義圖片容器var img;//定義原始數(shù)據(jù)的寬和高的尺寸var $width,$height;//定義一個(gè)寬高var _w,_h;var imgList = $('[data-myColorBox]');// imgList.css({// outline:'1px solid red'// });imgList.css({cursor:'pointer'}).hover(function () {$(this).css({outline:'2px solid blue'})},function () {$(this).css({outline:'none'})})//當(dāng)圖片被點(diǎn)擊時(shí)，所要干的事情.click(function () {//1判斷用于樣式的基礎(chǔ)元素是否存在，不存在則建立if($('myColorBoxMaskLayer').length != 0){maskLayer = $('myColorBoxMaskLayer');}else{maskLayer = $('<myColorBoxMaskLayer>').appendTo('body')//當(dāng)遮罩層被點(diǎn)擊時(shí)，起到一個(gè)關(guān)閉圖片的效果maskLayer.click(function () {maskLayer.stop().fadeOut();viewLayer.stop().fadeOut();img.stop().fadeOut();})}//1判斷用于樣式的基礎(chǔ)元素是否存在，不存在則建立if($('myColorBoxViewLayer').length != 0){viewLayer = $('myColorBoxViewLayer');img = $('myColorBoxViewLayer img');}else{viewLayer = $('<myColorBoxViewLayer>').appendTo('body').css({width:0,height:0,marginLeft:0,marginTop:0});;img = $('<img>').appendTo('myColorBoxViewLayer');}//2取得原始數(shù)據(jù)//定義一個(gè)空的 圖片容器var $img = new Image();//將點(diǎn)擊的圖片的url賦值給剛剛定義過(guò)的乳片容器對(duì)象$img.src = this.src;//onload表示當(dāng)圖片加載完成時(shí)，再去取圖片的原始值$img.onload = function(){$width = $img.width;$height = $img.height;//讓圖片在保持寬高比的情況下自適應(yīng)屏幕//得到屏幕的寬和高,然后還要據(jù)屏幕有一定的距離var ww = $(window).width()-100;var hh = $(window).height()-100;//定義寬高的比例var bili = $width/$height;if($width>ww||$height>hh){//寬高等比例縮小if(ww/bili<=hh){$width = ww;$height = ww/bili;}else{$height = hh;$width = hh*bili;}}//記錄寬度，高度變化的最小值var time = Math.min(Math.abs($width-_w),Math.abs($height-_h));_w = $width;_h = $height;//3.完成動(dòng)畫(huà)//遮罩層的處理過(guò)程maskLayer.css({position:'fixed',//上下左右為0，樣式就會(huì)類(lèi)似于自適應(yīng)left:0,top:0,right:0,bottom:0,//遮蓋層的z軸相對(duì)位置zIndex:9998,backgroundColor:'black',//初始狀態(tài)隱藏display:'none'}).fadeTo(600,.8);//圖片的顯示層（遮罩層上面那一層）viewLayer.css({position:'fixed',//顯示層居中顯示：及中點(diǎn)從寬度的一半，高度的一半位置left:'50%',top:'50%',backgroundColor:'white',borderRadius:3,//初始狀態(tài)隱藏display:'none',//透明度：一開(kāi)始逐漸顯現(xiàn)出來(lái)opacity:0,//遮蓋層的z軸相對(duì)位置zIndex:9999}).show().animate({//透明度和寬度同時(shí)變化opacity:1,//8表示兩邊各多出4px的邊框width:$width+8,height:$height+8,borderRadius:3,marginLeft:-($width+8)/2,marginTop:-($height+8)/2},time,function () {img.attr('src',$img.src).css({width:$width,height:$height,border:'4px solid white',borderRadius:3,display:'none'}).fadeIn()});};});} })(jQuery);效果圖：
自定義動(dòng)畫(huà)隊(duì)列
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定義簡(jiǎn)歷</title><style>#box ul{list-style: none;margin: 0;padding: 0;}#box{width: 1000px;margin: 10px auto;border: 1px solid black;}#box1,#box2{width: 250px;height: 200px;display: inline-block;}#box2 ol,#box1 li{width: 500px;height: 50px;overflow: hidden;}#box3{width: 150px;height: 180px;overflow: hidden;margin-left: 250px;display: inline-block;top:-20px;/*border: 1px solid red;*/}li div{width: 250px;height: 50px;line-height: 50px;margin-left: 100px;position: relative;top:-50px;}ol div{width: 250px;height: 50px;line-height: 50px;margin-left: 200px;position: relative;top:-50px;}#box3 img{width: 150px;height: 180px;position: relative;top:-180px;}#title h1{text-align: center;}p{text-indent: 2em;}#box4{width: 1000px;height: 116px;overflow: hidden;}#box5{width: 1000px;height: 105px;overflow: hidden;}#box6{width: 1000px;height: 62px;overflow: hidden;}#box7{width: 1000px;height: 105px;overflow: hidden;}#box4_1,#box5_1{position: relative;top:-116px;}#box6_1{position: relative;top:-62px;}#box7_1{position: relative;top:-105px;}</style> </head> <body> <div id="title"><h1>個(gè)人簡(jiǎn)歷</h1></div> <div id="box"><ul><dl><fieldset><legend>基本信息</legend><div id="box1"><li><div>姓名：張adf</div></li><li><div>年齡：2</div></li><li><div>學(xué)歷：大學(xué)本科</div></li><li><div>求職意向：JAVA全棧工程師</div></li></div><div id="box2"><ol><div>手機(jī)：1399172451692</div></ol><ol><div>郵箱：11327935119@qq.com</div></ol><ol><div>微信：xiaomengzi</div></ol><ol><div>地址:陜西省商洛市鎮(zhèn)安縣</div></ol></div><div id="box3"><img src="images/b1.jpg"></div></fieldset><div id="box4"><div id="box4_1"><fieldset><legend>自我評(píng)價(jià)</legend><p>工作積極認(rèn)真，細(xì)心負(fù)責(zé)，熟練運(yùn)用辦公自動(dòng)化軟件，善于在工作中提出問(wèn)題，發(fā)現(xiàn)問(wèn)題，解決問(wèn)題，有較強(qiáng)的分析能力，勤奮好學(xué)，踏實(shí)肯干，動(dòng)手能力強(qiáng)，認(rèn)真負(fù)責(zé)，有很強(qiáng)的社會(huì)責(zé)任感，堅(jiān)毅不拔，吃苦耐勞，喜歡和勇于迎接新挑戰(zhàn)！</p></fieldset></div></div><div id="box5"><div id="box5_1"><fieldset><legend>教育背景</legend><ul>學(xué)校：寶雞文理學(xué)院</ul><ul>專(zhuān)業(yè):計(jì)算機(jī)科學(xué)與技術(shù)專(zhuān)業(yè)</ul><ul>主修課程：數(shù)據(jù)庫(kù)原理、計(jì)算機(jī)圖形學(xué)、大數(shù)據(jù)技術(shù)，JAVA實(shí)用教程</ul></fieldset></div></div><div id="box6"><div id="box6_1"><fieldset><legend>工作經(jīng)驗(yàn)</legend>xxxx年x月-xxxx年x月在xx公司進(jìn)行實(shí)習(xí)。</fieldset></div></div><div id="box7"><div id="box7_1"><fieldset><legend>職業(yè)技能</legend><li><ul>語(yǔ)言能力：大學(xué)英語(yǔ)四級(jí)（待過(guò)）</ul><ul>計(jì)算機(jī)：熟練操作windows平臺(tái)上的各類(lèi)應(yīng)用軟件，如Office、各種計(jì)算機(jī)編程工具。</ul><ul>團(tuán)隊(duì)能力：具有豐富的團(tuán)隊(duì)組建與擴(kuò)充經(jīng)驗(yàn)和項(xiàng)目管理與協(xié)調(diào)經(jīng)驗(yàn)，能夠獨(dú)當(dāng)一面。</ul></li></fieldset></div></div></dl></ul> </div> <script src="js/jquery-3.4.1.min.js"></script> <script>var juben = [function () {$('#box #box1 div:eq(0)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box1 div:eq(1)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box1 div:eq(2)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box1 div:eq(3)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box2 div:eq(0)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box2 div:eq(1)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box2 div:eq(2)').css({left:0,top:-50}).animate({left:0,top:0})},function () {$('#box #box2 div:eq(3)').css({left:0,top:-50}).animate({left:0,top:0},zhixing)},function () {$('#box #box3 img:eq(0)').css({left:0,top:-180}).animate({left:0,top:0})},function () {$('#box #box4 #box4_1:eq(0)').css({left:0,top:-116}).animate({left:0,top:0},function () {setTimeout(zhixing,1000)})},function () {$('#box #box5 #box5_1:eq(0)').css({left:0,top:-116}).animate({left:0,top:0},function () {setTimeout(zhixing,1000)})},function () {$('#box #box6 #box6_1:eq(0)').css({left:0,top:-116}).animate({left:0,top:0},function () {setTimeout(zhixing,1000)})},function () {$('#box #box7 #box7_1:eq(0)').css({left:0,top:-105}).animate({left:0,top:0},function () {setTimeout(zhixing,1000)})}];$(':root').queue('汪倫，你怎么看？',juben);$(document).click(function () {$(':root').dequeue('汪倫，你怎么看？');});//自執(zhí)行函數(shù)function zhixing() {$(':root').dequeue('汪倫，你怎么看？');} </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的web16(ColorBox插件编写)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MLP，GCN，GAT，GraphSAG
- 下一篇： 在word中一个符号怎么打，这个符号是上