web16(ColorBox插件编写)
生活随笔
收集整理的這篇文章主要介紹了
web16(ColorBox插件编写)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自定義插件
<!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();})// //圖片預加載// 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;//定義原始數據的寬和高的尺寸var $width,$height;//定義一個寬高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'})})//當圖片被點擊時，所要干的事情.click(function () {//1判斷用于樣式的基礎元素是否存在，不存在則建立if($('myColorBoxMaskLayer').length != 0){maskLayer = $('myColorBoxMaskLayer');}else{maskLayer = $('<myColorBoxMaskLayer>').appendTo('body')//當遮罩層被點擊時，起到一個關閉圖片的效果maskLayer.click(function () {maskLayer.stop().fadeOut();viewLayer.stop().fadeOut();img.stop().fadeOut();})}//1判斷用于樣式的基礎元素是否存在，不存在則建立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取得原始數據//定義一個空的 圖片容器var $img = new Image();//將點擊的圖片的url賦值給剛剛定義過的乳片容器對象$img.src = this.src;//onload表示當圖片加載完成時，再去取圖片的原始值$img.onload = function(){$width = $img.width;$height = $img.height;//讓圖片在保持寬高比的情況下自適應屏幕//得到屏幕的寬和高,然后還要據屏幕有一定的距離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.完成動畫//遮罩層的處理過程maskLayer.css({position:'fixed',//上下左右為0，樣式就會類似于自適應left:0,top:0,right:0,bottom:0,//遮蓋層的z軸相對位置zIndex:9998,backgroundColor:'black',//初始狀態隱藏display:'none'}).fadeTo(600,.8);//圖片的顯示層（遮罩層上面那一層）viewLayer.css({position:'fixed',//顯示層居中顯示：及中點從寬度的一半，高度的一半位置left:'50%',top:'50%',backgroundColor:'white',borderRadius:3,//初始狀態隱藏display:'none',//透明度：一開始逐漸顯現出來opacity:0,//遮蓋層的z軸相對位置zIndex:9999}).show().animate({//透明度和寬度同時變化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);效果圖：
自定義動畫隊列
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定義簡歷</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>個人簡歷</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>學歷：大學本科</div></li><li><div>求職意向：JAVA全棧工程師</div></li></div><div id="box2"><ol><div>手機：1399172451692</div></ol><ol><div>郵箱：11327935119@qq.com</div></ol><ol><div>微信：xiaomengzi</div></ol><ol><div>地址:陜西省商洛市鎮安縣</div></ol></div><div id="box3"><img src="images/b1.jpg"></div></fieldset><div id="box4"><div id="box4_1"><fieldset><legend>自我評價</legend><p>工作積極認真，細心負責，熟練運用辦公自動化軟件，善于在工作中提出問題，發現問題，解決問題，有較強的分析能力，勤奮好學，踏實肯干，動手能力強，認真負責，有很強的社會責任感，堅毅不拔，吃苦耐勞，喜歡和勇于迎接新挑戰！</p></fieldset></div></div><div id="box5"><div id="box5_1"><fieldset><legend>教育背景</legend><ul>學校：寶雞文理學院</ul><ul>專業:計算機科學與技術專業</ul><ul>主修課程：數據庫原理、計算機圖形學、大數據技術，JAVA實用教程</ul></fieldset></div></div><div id="box6"><div id="box6_1"><fieldset><legend>工作經驗</legend>xxxx年x月-xxxx年x月在xx公司進行實習。</fieldset></div></div><div id="box7"><div id="box7_1"><fieldset><legend>職業技能</legend><li><ul>語言能力：大學英語四級（待過）</ul><ul>計算機：熟練操作windows平臺上的各類應用軟件，如Office、各種計算機編程工具。</ul><ul>團隊能力：具有豐富的團隊組建與擴充經驗和項目管理與協調經驗，能夠獨當一面。</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('汪倫，你怎么看？');});//自執行函數function zhixing() {$(':root').dequeue('汪倫，你怎么看？');} </script> </body> </html>總結
以上是生活随笔為你收集整理的web16(ColorBox插件编写)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MLP，GCN，GAT，GraphSAG
- 下一篇： 在word中一个符号怎么打，这个符号是上