JavaScript仿百度图片浏览效果

本文实例为大家分享了js图片浏览效果的具体代码，供大家参考，具体内容如下

在线地址：

index

<Meta charset="utf-8"> 仿<a href="https://www.jb51.cc/tag/baidu/" target="_blank" class="keywords">百度</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>浏览@H_<a href="https://www.jb51.cc/tag/404/" target="_blank" class="keywords">404</a>_16@ <link rel="stylesheet" type="text/css" href="css/index.css"/> <script src="js/jquery-2.1.0.js"></script> <script src="js/data.js"></script> <script src="js/handleImage.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container1"> <div class="main1">  <div class="showImg1"> <a href="javascript:;" class="showImg1_btnLeft"></a> <a href="javascript:;" class="showImg1_btnRight"></a> <div class="img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1"> <img src="" class="img1"/> </div> </div>  <div class="chooseImg1_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> <div class="navList1"> <span class="btnImgList"><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>列表<i></i></span> <span class="btnImgScale"> <a href="javascript:;" class="scaleAdd1">+</a> <b class="scale1">100%</b> <a href="javascript:;" class="scaleReduce1">-</a> </span> <span class="btnImgInit1">原始尺寸</span> <span class="btnImgFullScreen">全屏</span> <span>其他</span> <span>其他</span> </div> <div class="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1"> <a href="javascript:;" class="chooseImg1_btnLeft"></a> <div class="imgListBox1"> <ul class="imgList1"></ul> </div> <a href="javascript:;" class="chooseImg1_btnRight"></a> </div> <pre><code> </div> </div> <div class="sider1"> <p class="pTroTit1"></p> <p class="pTroName1"></p> </div> </div>  <div class="container2"> <div class="chooseTime<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> <select class="select"> <option value="2">2s</option> <option value="3">3s</option> <option value="5">5s</option> </select> <a href="javascript:;" class="btnStart">开始</a> <a href="javascript:;" class="btnStop">||</a> </div>  <div class="img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2"> <img src="" class="img2" /> </div> <a href="javascript:;" class="showImg2_btnLeft"></a> <a href="javascript:;" class="showImg2_btnRight"></a> <div class="imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2"> <ul class="imgList2"></ul> </div> <a href="javascript:;" class="chooseImg2_btnLeft aBtn" ></a> <a href="javascript:;" class="chooseImg2_btnRight aBtn"></a> <a href="javascript:;" class="btnExitFullScreen">x</a> </div> </code></pre> </body> </html> </pre> </div> <p>css </p> <div class="jb51code"> <pre class="brush:css;"> /* common */ *{ margin: 0; padding: 0; } body,html{ font-family: "微软雅黑"; font-size: 12px; overflow: hidden; } li{ list-style: none; } a{ text-decoration: none; color: #000; } .btnIco{ background: url(../images/btn.png); } b{ font-weight: normal; } i{ font-style: normal; } <p>/<em> container1 </em>/<br /> .container1{<br /> width: 100%; height: 100%; background-color: #f6f6f6; position: absolute; min-width: 1000px; min-height: 400px; -display: none;<br /> }<br /> .main1{<br /> position: absolute; width: calc(100% - 310px); height: calc(100% - 5px); left: 0; top: 5px; background-color: #fff;<br /> }<br /> .sider1{<br /> position: absolute; width: 300px; margin-left: 10px; height: calc(100% - 5px); overflow-x: hidden; overflow-y: auto; top: 5px; right: 0px; background-color: #fff;<br /> }<br /> .showImg1{<br /> width: 100%; position: relative;<br /> }<br /> .showImg1 a{<br /> position: absolute; width: 70px; height: 100%; top: 0; background-color: #fff; transition: all 0.5s;<br /> }<br /> .showImg1 a:hover{<br /> background-color: #e6e6e6;<br /> }<br /> .showImg1 a:before{<br /> content: ''; display: block; position: absolute; width: 40px; height: 72px; background: url(../images/btn.png); left: calc(50% - 20px); top: calc(50% - 31px);<br /> }<br /> .showImg1 .showImg1_btnLeft{<br /> left: 0;<br /> }<br /> .showImg1 .showImg1_btnRight{<br /> right: 0;<br /> }<br /> .showImg1 .showImg1_btnLeft:before{<br /> background-position: 0 -87px;<br /> }<br /> .showImg1 .showImg1_btnLeft:hover:before{<br /> background-position: -46px -87px;<br /> }<br /> .showImg1 .showImg1_btnRight:before{<br /> background-position: 0 0;<br /> }<br /> .showImg1 .showImg1_btnRight:hover:before{<br /> background-position: -46px 0;<br /> }<br /> .showImg1 .img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1{<br /> position: absolute; width: calc(100% - 144px); height: calc(100% - 4px); left: 72px; top: 2px; overflow: hidden;<br /> }<br /> .showImg1 .img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 .img1{<br /> position: absolute; display: block;<br /> }<br /> .chooseImg1_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>{<br /> position: relative; overflow: hidden;<br /> }<br /> .navList1{<br /> height: 38px; line-height: 38px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; text-align: center; font-size: 14px;<br /> }<br /> .navList1 span{<br /> margin-left: -3px;<br /> }<br /> .navList1 span,.navList1 a{<br /> display: inline-block; color: #666; padding: 0 10px; cursor: pointer; position: relative;<br /> }<br /> .navList1 span:before{<br /> content: '|'; display: block; position: absolute; left: -3px; color: #e3e3e3;<br /> }<br /> .navList1 span:hover:before{<br /> display: none;<br /> }<br /> .navList1 span:last-child:after{<br /> content: '|'; display: block; position: absolute; right: 1px; color: #e3e3e3;<br /> }<br /> .navList1 span:hover,.navList1 a:hover{<br /> background-color: #e3e3e3;<br /> }<br /> .navList1 .btnImgScale,.navList1 .btnImgScale:hover{<br /> cursor: default; background-color: #fff; padding: 0;<br /> }<br /> .navList1 a{<br /> padding: 0; width: 30px;<br /> } </p> <p>.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1{<br /> position: relative; width: 100%; height: 100px<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 a{<br /> float: left; display: block; width: 25px; height: 70px; margin: 15px 2px 0; position: relative;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 a:hover{<br /> background-color: #e6e6e6;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 a.disable{<br /> background-color: #fff;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 a:before{<br /> content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnLeft:before,.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnLeft.disable:hover:before{<br /> background-position: -27px -174px;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnLeft.disable:hover:before{<br /> cursor: default;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnLeft:hover:before{<br /> background-position: -73px -174px;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnRight:before,.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnRight.disable:hover:before{<br /> background-position: 0 -174px;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnRight.disable:hover:before{<br /> cursor: default;<br /> }<br /> .<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Limit1 .chooseImg1_btnRight:hover:before{<br /> background-position: -46px -174px;<br /> }<br /> .imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1{<br /> position: relative; width: calc(100% - 58px); height: 90px; padding: 4px 0 6px; float: left; overflow: hidden;<br /> }<br /> .imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 .imgList1{<br /> padding-top: 5px; position: absolute; left: 0; top: 0; transition: left 0.5s; float: left;<br /> }<br /> .imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 .imgList1 li{<br /> float: left; width: 68px; height: 68px; border: 1px solid #dfdfdf; margin-top: 10px; margin-right: 10px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;<br /> }<br /> .imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 .imgList1 li.active{<br /> width: 76px; height: 76px; border: 2px solid #3388fb; margin-top: 5px; background-image: url(../images/a1.jpg);<br /> } </p> <p>/<em> 全屏 </em>/<br /> .container2{<br /> width: 100%; height: 100%; background-color: #262626; position: absolute; display: none;<br /> }<br /> .btnExitFullScreen{<br /> color: #989898; position: absolute; top: 1%; right: 1%; font-size: 20px; line-height: 20px;<br /> }<br /> .chooseTime<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>{<br /> position: absolute; width: 70px; text-align: center; height: 20px; line-height: 20px; background-color: #3d3d3d; left: calc(50% - 35px); top: 1.5%;<br /> }<br /> .chooseTime<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> *{<br /> color: #e1e1e1;<br /> }<br /> .chooseTime<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> .select{<br /> background: #121212; color: #999999; width: 40px; height: 18px; left: 2px; top:1px; outline: none; display: none; float: left; position: relative; top: 1px;<br /> }<br /> .chooseTime<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> .btnStart{<br /> -display: none;<br /> }<br /> .chooseTime<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> .btnStop{<br /> display: none; position: relative; top: -1px;<br /> }<br /> .img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2{<br /> position: absolute; width: 70%; height: calc(90% - 144px); -border: 1px solid red; left: 15%; top: 8%;<br /> }<br /> .img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2 img{<br /> position: absolute;<br /> }<br /> .showImg2_btnLeft,.showImg2_btnRight{<br /> width: 50%; height: calc(90% - 144px); position: absolute; top: 8%; -border: 1px solid #fff;<br /> }<br /> .showImg2_btnLeft{<br /> left: 0; cursor: url(../images/cur_left.jpg),auto;;<br /> }<br /> .showImg2_btnRight{<br /> right: 0; cursor: url(../images/cur_right.jpg),auto;;<br /> }<br /> .imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2{<br /> position: absolute; width: 80%; height: 140px; border: 1px solid #3e3e3e; left: 10%; bottom: 2%; overflow: hidden;<br /> }<br /> .imgList2{<br /> position: absolute; left: 0; top: 0; width: 100%; height: 110px; top: 15px; transition: left 0.5s;<br /> }<br /> .imgList2 li{<br /> width: 110px; height: 110px; <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-sizing: border-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>; border: 1px solid #707070; float: left; margin-right: 5px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;<br /> }<br /> .imgList2 li.active{<br /> border: 2px solid #2f95d5;<br /> } </p> <p>.container2 .aBtn{<br /> position: absolute; display: block; width: 25px; height: 70px; margin: 15px 2px 0;<br /> }<br /> .container2 .aBtn:hover{<br /> background-color: #e6e6e6;<br /> }<br /> .container2 .aBtn.disable{<br /> background-color: #fff;<br /> }<br /> .container2 .aBtn:before{<br /> content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);<br /> }<br /> .container2 .chooseImg2_btnLeft{<br /> left: calc(10% - 50px); bottom: calc(2% + 35px);<br /> }<br /> .container2 .chooseImg2_btnRight{<br /> right: calc(10% - 50px); bottom: calc(2% + 35px);<br /> }<br /> .container2 .chooseImg2_btnLeft:before,.container2 .chooseImg2_btnLeft.disable:hover:before{<br /> background-position: -27px -174px;<br /> }<br /> .container2 .chooseImg2_btnLeft.disable:hover:before{<br /> cursor: default;<br /> }<br /> .container2 .chooseImg2_btnLeft:hover:before{<br /> background-position: -73px -174px;<br /> }<br /> .container2 .chooseImg2_btnRight:before,.container2 .chooseImg2_btnRight.disable:hover:before{<br /> background-position: 0 -174px;<br /> }<br /> .container2 .chooseImg2_btnRight.disable:hover:before{<br /> cursor: default;<br /> }<br /> .container2 .chooseImg2_btnRight:hover:before{<br /> background-position: -46px -174px;<br /> } </pre></p> </div> <p>data.js </p> <div class="jb51code"> <pre class="brush:js;"> var imgData = [ { src: 'images/a1.jpg',title: 'a1.jpg',name: '火影忍着1' },{ src: 'images/a2.jpg',title: 'a2.jpg',name: '火影忍着3' },{ src: 'images/a3.jpg',title: 'a3.jpg',{ src: 'images/a4.jpg',title: 'a4.jpg',name: '火影忍着4' },{ src: 'images/a5.jpg',title: 'a5.jpg',name: '火影忍着5' },{ src: 'images/a6.jpg',title: 'a6.jpg',name: '火影忍着6' },{ src: 'images/a7.jpg',title: 'a7.jpg',name: '火影忍着7' },{ src: 'images/a8.jpg',title: 'a8.jpg',name: '火影忍着8' },{ src: 'images/a9.jpg',title: 'a9.jpg',name: '火影忍着9' },{ src: 'images/a10.jpg',title: 'a10.jpg',name: '火影忍着10' },{ src: 'images/a11.jpg',title: 'a11.jpg',name: '火影忍着11' },{ src: 'images/a12.jpg',title: 'a12.jpg',name: '火影忍着12' },{ src: 'images/a13.jpg',title: 'a13.jpg',name: '火影忍着13' },{ src: 'images/a14.jpg',title: 'a14.jpg',name: '火影忍着14' },{ src: 'images/a15.jpg',title: 'a15.jpg',name: '火影忍着15' },{ src: 'images/a16.jpg',title: 'a16.jpg',name: '火影忍着16' },{ src: 'images/a17.jpg',title: 'a17.jpg',name: '火影忍着17' },{ src: 'images/a18.jpg',title: 'a18.jpg',name: '火影忍着18' },{ src: 'images/a19.jpg',title: 'a19.jpg',name: '火影忍着19' },{ src: 'images/a20.jpg',title: 'a20.jpg',name: '火影忍着20' } ]; </pre> </div> <p>handleImage.js </p> <div class="jb51code"> <pre class="brush:js;"> (function(window,$){ function HandleImage(e){ this.init(e); }; var proto = { init: function(e){ this.nb = {}; this.nb.$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = e.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>; this.nb.$img = e.img; this.set<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>WH(); this.imgMouseEvent(); },//对外提供，重置盒子的宽高，resize事件需要<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a> set<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>WH: function(){ this.nb.bWidth = this.nb.$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.width(); this.nb.bHeight = this.nb.$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.height(); },getImgWH: function(src,isNormal,callback){ var self = this; var img = new Image(); img.onload = function(){ self.nb.mWidth = img.width; self.nb.mHeight = img.height; self.setStartPosition(isNormal); callback && callback(); }; img.src = src; },//对外提供，输入<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>地址,isNormal：true（初始不缩放） setImg: function(src,callback){ this.getImgWH(src,callback); this.nb.$img.attr('src',src); },//初始化<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>位置 setStartPosition: function(isNormal){ var self = this; var bW = self.nb.bWidth = self.nb.$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.width(); <span style="white-space:pre"> </span>bH = self.nb.bHeight = self.nb.$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.height(); mW = self.nb.mWidth,mH = self.nb.mHeight; var sScale = self.nb.nScale = Math.min(bW/mW,bH/mH); if( sScale>=1 || isNormal ){ self.nb.nScale = 1; self.nb.left = (bW-mW)/2; self.nb.top = (bH-mH)/2; self.nb.$img.css({ 'width': mW,'height': mH,'left': (bW-mW)/2,'top': (bH-mH)/2 }) }else{ self.nb.left = (bW-mW*sScale)/2; self.nb.top = (bH-mH*sScale)/2; self.nb.$img.css({ 'width': mW*sScale,'height': mH*sScale,'left': (bW-mW*sScale)/2,'top': (bH-mH*sScale)/2 }) }; this.setCenter(); },setCenter: function(){ var self = this; this.nb.centerX = self.nb.left + self.nb.mWidth*self.nb.nScale/2; this.nb.centerY = self.nb.top + self.nb.mHeight*self.nb.nScale/2; },//对外提供，改变<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>大小 setScale: function(str,callback){ var self = this; if( str == 'plus'){ self.nb.nScale += 0.1; }else if( str == 'reduce' ){ self.nb.nScale -= 0.1; }; self.nb.nScale = self.nb.nScale>=10?10:self.nb.nScale; self.nb.nScale = self.nb.nScale<=0.1?0.1:self.nb.nScale; self.nb.left = self.nb.centerX - self.nb.mWidth*self.nb.nScale/2; self.nb.top = self.nb.centerY - self.nb.mHeight*self.nb.nScale/2; self.nb.$img.css({ 'width': self.nb.mWidth*self.nb.nScale,'height': self.nb.mHeight*self.nb.nScale,'left': self.nb.left,'top': self.nb.top }); callback && callback(); },//对外提供，<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>缩放比例 getScale: function(){ return this.nb.nScale; },imgMouseEvent: function(){ var self = this; var sX,sY,disX,disY,sImgX,sImgY,b; self.nb.$img.on('mousedown',function(e){ b = true; sX = e.pageX; sY = e.pageY; sImgX = self.nb.left; sImgY = self.nb.top; }); $(document).on('mousemove',function(e){ if( !b ) return; self.nb.$img.css({ 'left': sImgX + e.pageX - sX,'top': sImgY + e.pageY - sY }); return false; }); $(document).on('mouseup',function(){ b = false; self.nb.left = parseInt(self.nb.$img.css('left')); self.nb.top = parseInt(self.nb.$img.css('top')); self.setCenter(); }); } }; HandleImage.prototype = proto; window.HandleImage = HandleImage; })(window,jQuery); </pre> </div> <p>index.js </p> <div class="jb51code"> <pre class="brush:js;"> $(document).ready(function(){ var $win = $(window),$con1 = $('.container1'),$main1 = $('.main1'),$showImg1 = $('.showImg1'),$showImg1_btnLeft = $('.showImg1_btnLeft'),$showImg1_btnRight = $('.showImg1_btnRight'),$img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 = $('.img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1'),$img1 = $('.img1'),$chooseImg1_btnLeft = $('.chooseImg1_btnLeft'),$chooseImg1_btnRight = $('.chooseImg1_btnRight'),$chooseImg1_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = $('.chooseImg1_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>'),$scale1 = $('.scale1'),$btnImgInit1 = $('.btnImgInit1'),$btnImgFullScreen = $('.btnImgFullScreen'),$sider1 = $('.sider1'),$imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 = $('.imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1'),$imgList1 = $('.imgList1'); //container2-fullscreen对象 var $con2 = $('.container2'),$select = $('.select'),$btnStart = $('.btnStart'),$btnStop = $('.btnStop'),$btnExitFullScreen = $('.btnExitFullScreen'),$img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2 = $('.img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2'),$img2 = $('.img2'),$showImg2_btnLeft = $('.showImg2_btnLeft'),$showImg2_btnRight = $('.showImg2_btnRight'),$chooseImg2_btnLeft = $('.chooseImg2_btnLeft'),$chooseImg2_btnRight = $('.chooseImg2_btnRight'),$imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2 = $('.imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2'),$imgList2 = $('.imgList2'); <p>var winW = $win.width(),winH = $win.height();<br /> //<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>处理事件<br /> var h1;<br /> var handle = {<br /> init1: function(){<br /> h1 = new HandleImage({<br /> <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>: $img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1,img: $img1<br /> });<br /> },setImg1: function(src,isNormal){<br /> h1.setImg(src,function(){<br /> imgListEvent.setScaleText();<br /> });<br /> }<br /> }; </p> <p>//窗口改变事件<br /> var envFunc = {<br /> fnSize: function(){<br /> $(window).on('resize',function(){<br /> winW = $win.width(),winH = $win.height();<br /> containEvent.setCon();<br /> containEvent.setShowImg1_height();<br /> imgListEvent.imgList1_position();<br /> h1.set<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>WH();<br /> });<br /> }<br /> };<br /> envFunc.fnSize(); </p> <p>//cantanier事件<br /> var containEvent = {<br /> init: function(){<br /> this.setCon();<br /> this.setShowImg1_height();<br /> handle.init1();<br /> },//设置container宽高<br /> setCon: function(){<br /> $con1.css({<br /> 'width': winW,'height': winH<br /> });<br /> $con2.css({<br /> 'width': winW,'height': winH<br /> });<br /> },//设置<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>控制区高<br /> setShowImg1<em>height: function(){<br /> $showImg1.css({<br /> 'height': $main1.height() - $chooseImg1</em><a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.height()<br /> })<br /> },showText: function(data){<br /> $('.pTroTit1').text(data['src']);<br /> $('.pTroName1').text(data['title']);<br /> }<br /> };<br /> containEvent.init(); </p> <p>//<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>选择普通的width：70+10,选中active：80+10<br /> var $liActive_1;<br /> var index = 0;<br /> var imgListEvent = {<br /> init: function(){<br /> this.imgList1_add();<br /> this.imgList1_click();<br /> this.scaleEvent();<br /> this.mouseWheelEvent();<br /> this.fnClick();<br /> },imgList1_add: function(){<br /> var str = ''<br /> for( var i=0; i<imgData.length; i++ ){<br /> var tmp = imgData[i];<br /> str += '<li style="background-image:url('+ tmp.src +')" ></li>'<br /> };<br /> $imgList1.append(str);<br /> $imgList1.css({<br /> 'width': (70+10)<em>imgData.length + 10<br /> });<br /> },imgList1_click: function(){<br /> var self = this;<br /> $imgList1.find('li').on('click',function(){<br /> if( $liActive_1 ) $liActive_1.removeClass('active');<br /> index = $(this).index();<br /> $(this).addClass('active');<br /> $liActive_1 = $(this);<br /> self.imgList1_position();<br /> handle.setImg1( imgData[index]['src'] );<br /> containEvent.showText( imgData[index] );<br /> });<br /> $imgList1.find('li').eq(0).trigger('click');<br /> },imgList1_position: function(){<br /> var <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width1 = $imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1.width();<br /> var le = (<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width1/2 - index</em>80);<br /> le = Math.floor(le/80)<em>80;<br /> le = le>=0?0:le;<br /> var maxLe = (<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width1-$imgList1.width())+10;<br /> le = le<maxLe?maxLe:le;<br /> $imgList1.css({<br /> 'left': le<br /> })<br /> },scaleEvent: function(){<br /> var timer = null;<br /> var btnPos = {<br /> x: null,y: null<br /> };<br /> var fnCallback = function(){<br /> imgListEvent.setScaleText();<br /> };<br /> $('.scaleAdd1').on('mousedown',function(e){<br /> h1.setScale('plus',fnCallback);<br /> checkBtnPos(e);<br /> timer = setTimeout(function(){<br /> fnAnimate('plus');<br /> },500);<br /> });<br /> $('.scaleReduce1').on('mousedown',function(e){<br /> h1.setScale('reduce',fnCallback);<br /> checkBtnPos(e);<br /> timer = setTimeout(function(){<br /> fnAnimate('reduce');<br /> },500);<br /> });<br /> $('.scaleAdd1').add($('.scaleReduce1')).on('mouseup',function(){<br /> clearInterval(timer);<br /> return false;<br /> });<br /> $('.scaleAdd1').add($('.scaleReduce1')).on('mousemove',function(e){<br /> if( Math.abs(e.pageX-btnPos.x)>=5 || Math.abs(e.pageY-btnPos.y)>=5 ){<br /> clearInterval(timer);<br /> };<br /> return false;<br /> });<br /> function checkBtnPos(e){<br /> btnPos.x = e.pageX;<br /> btnPos.y = e.pageY;<br /> };<br /> function fnAnimate(str){<br /> if( str == 'plus' ){<br /> timer = setInterval(function(){<br /> h1.setScale('plus',fnCallback);<br /> },30);<br /> }else if( str == 'reduce'){<br /> timer = setInterval(function(){<br /> h1.setScale('reduce',30)<br /> };<br /> };<br /> },mouseWheelEvent: function(){<br /> var img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1 = $img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1.get(0);<br /> if( document.attachEvent ){<br /> img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1.attachEvent('onmousewheel',move)<br /> };<br /> if( document.addEventListener ){<br /> img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1.addEventListener('mousewheel',move,false);<br /> img<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1.addEventListener('mousewheel',false);<br /> };<br /> var fnCallback = function(){<br /> imgListEvent.setScaleText();<br /> };<br /> function move(e){<br /> var up = true;<br /> if( e.wheelDelta ){<br /> up = e.wheelDelta > 0 ? true : false;<br /> };<br /> if( e.detail ){<br /> up = e.detail < 0 ? true : false;<br /> };<br /> if( up ){<br /> h1.setScale('plus',fnCallback);<br /> }else{<br /> h1.setScale('reduce',fnCallback);<br /> };<br /> if( e.preventDefault ){<br /> e.preventDefault();<br /> }else{<br /> e.returnValue = false;<br /> }<br /> };<br /> },setScaleText: function(){<br /> var scale = Math.round(h1.getScale()</em>100);<br /> $scale1.text(scale+'%');<br /> },fnClick: function(){<br /> $showImg1_btnRight.on('click',function(){<br /> $liActive_1.next().trigger('click');<br /> });<br /> $showImg1_btnLeft.on('click',function(){<br /> $liActive_1.prev().trigger('click');<br /> });<br /> $chooseImg1_btnLeft.on('click',function(){<br /> var w = $imgListBox1.width();<br /> var le = parseInt($imgList1.css('left')) + w;<br /> if( le > 0 ) le = 0;<br /> $imgList1.css({<br /> 'left': le<br /> })<br /> });<br /> $chooseImg1_btnRight.on('click',function(){<br /> var w = $imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1.width();<br /> var minLe = w - $imgList1.width();<br /> var le = parseInt($imgList1.css('left')) - w;<br /> if( le < minLe ) le = minLe;<br /> $imgList1.css({<br /> 'left': le<br /> })<br /> });<br /> $btnImgInit1.on('click',function(){<br /> handle.setImg1( imgData[index]['src'],true );<br /> });<br /> $btnImgFullScreen.on('click',function(){<br /> fullScreen.enterFull();<br /> });<br /> }<br /> };<br /> imgListEvent.init(); </p> <p>/* </p> <ul> <li>container2<br /> <em>/<br /> var $liActive_2;<br /> var timer2;<br /> function setImg2(src){<br /> $imgBox2;<br /> $img2;<br /> var bW,bH,mW,mH;<br /> var img = new Image();<br /> $img2.attr('src',src);<br /> img.onload = function(){<br /> mW = img.width;<br /> mH = img.height;<br /> bW = $imgBox2.width();<br /> bH = $imgBox2.height();<br /> setPosition();<br /> };<br /> img.src = src;<br /> function setPosition(){<br /> var sScale = Math.min(bW/mW,bH/mH);<br /> if( sScale>=1 ){<br /> $img2.css({<br /> 'width': mW,'top': (bH-mH)/2<br /> });<br /> }else{<br /> $img2.css({<br /> 'width': mW</em>sScale,'top': (bH-mH<em>sScale)/2<br /> });<br /> };<br /> };<br /> };<br /> var fullScreen = {<br /> init: function(){<br /> this.addImg();<br /> this.addClick();<br /> },addImg: function(){<br /> var str = ''<br /> for( var i=0; i<imgData.length; i++ ){<br /> var tmp = imgData[i];<br /> str += '<li style="background-image:url('+ tmp.src +')" ></li>'<br /> };<br /> $imgList2.append(str);<br /> $imgList2.css({<br /> 'width': 115</em>imgData.length<br /> });<br /> },addClick: function(){<br /> var self = this;<br /> $imgList2.find('li').on('click',function(){<br /> if( $liActive_2 ) $liActive_2.removeClass('active');<br /> index = $(this).index();<br /> $(this).addClass('active');<br /> $liActive_2 = $(this);<br /> self.imgList2_position();<br /> setImg2( imgData[index]['src'] );<br /> });<br /> $showImg2_btnRight.on('click',function(){<br /> $liActive_2.next().trigger('click');<br /> });<br /> $showImg2_btnLeft.on('click',function(){<br /> $liActive_2.prev().trigger('click');<br /> });<br /> $chooseImg2_btnLeft.on('click',function(){<br /> var w = $imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2.width();<br /> var le = parseInt($imgList2.css('left')) + w;<br /> if( le > 0 ) le = 0;<br /> $imgList2.css({<br /> 'left': le<br /> })<br /> });<br /> $chooseImg2_btnRight.on('click',function(){<br /> var w = $imgList<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2.width();<br /> var minLe = w - $imgList2.width();<br /> var le = parseInt($imgList2.css('left')) - w;<br /> if( le < minLe ) le = minLe;<br /> $imgList2.css({<br /> 'left': le<br /> })<br /> });<br /> $btnExitFullScreen.on('click',function(){<br /> self.exitFull();<br /> });<br /> },imgList2_position: function(){<br /> var boxWidth2 = $imgListBox2.width();<br /> var le = (boxWidth2/2 - index<em>115);<br /> le = Math.floor(le/115)</em>115;<br /> le = le>=0?0:le;<br /> var maxLe = (<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width2-$imgList2.width());<br /> le = le<maxLe?maxLe:le;<br /> $imgList2.css({<br /> 'left': le<br /> });<br /> },enterFull: function(){<br /> var self = this;<br /> enterFullscreen();<br /> $con1.css('opacity','0');<br /> $con2.show();<br /> setTimeout(function(){<br /> $imgList2.find('li').eq(index).trigger('click');<br /> },500);<br /> //esc keyCode:27<br /> $(document).on('keyup.a',function(e){<br /> if( e.keyCode == 27 ){<br /> self.exitFull();<br /> };<br /> });<br /> },exitFull: function(){<br /> clearInterval(timer2);<br /> $(document).off('keyup.a');<br /> $con1.css('opacity','1');<br /> $con2.hide();<br /> animateEvent.showStart();<br /> setTimeout(function(){<br /> <span style="white-space:pre"> </span>$imgList1.find('li').eq(index).trigger('click');<br /> <span style="white-space:pre"> </span>},500);<br /> exitFullscreen();<br /> }<br /> };<br /> fullScreen.init();<br /> // fullScreen.enterFull(); </li> </ul> <p>//定时器<br /> var animateEvent = {<br /> init: function(){<br /> var self = this;<br /> $btnStart.on('click',function(){<br /> self.start();<br /> });<br /> $btnStop.on('click',function(){<br /> self.stop();<br /> });<br /> $select.on('change',function(){<br /> self.start();<br /> });<br /> },start: function(){<br /> this.showStop();<br /> var intervalTime = parseInt($select.val())*1000;<br /> clearInterval(timer2);<br /> timer2 = setInterval(function(){<br /> $liActive_2.next().trigger('click');<br /> },intervalTime);<br /> },stop: function(){<br /> clearInterval(timer2);<br /> this.showStart();<br /> },showStart: function(){<br /> clearInterval(timer2);<br /> $select.show().val('2');<br /> $select.hide();<br /> $btnStop.hide();<br /> $btnStart.show();<br /> },showStop: function(){<br /> $btnStart.hide();<br /> $btnStop.show();<br /> $select.show();<br /> }<br /> };<br /> animateEvent.init(); </p> <p>/* </p> <ul> <li>全屏事件<br /> */<br /> // 判断各种浏览器<br /> function enterFullscreen() {<br /> var element = document.documentElement;<br /> if (element.requestFullscreen) {<br /> element.requestFullscreen();<br /> } else if (element.mozRequestFullScreen) {<br /> element.mozRequestFullScreen();<br /> } else if (element.webkitRequestFullscreen) {<br /> element.webkitRequestFullscreen();<br /> } else if (element.msRequestFullscreen) {<br /> element.msRequestFullscreen();<br /> }<br /> }<br /> // 判断浏览器种类<br /> function exitFullscreen() {<br /> if (document.exitFullscreen) {<br /> document.exitFullscreen();<br /> } else if (document.mozCancelFullScreen) {<br /> document.mozCancelFullScreen();<br /> } else if (document.webkitExitFullscreen) {<br /> document.webkitExitFullscreen();<br /> }<br /> }<br /> }); </pre></div> <p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p> </li> </ul><i class="glyphicon glyphicon-link"></i> 原文链接：https://www.f2er.com/js/44254.html</div> <div class="topcard-tags"><a href="https://www.f2er.com/tag/JavaScriptfangbaidutupianliulan/" class="tag_link" target="_blank">JavaScript仿百度图片浏览</a><a href="https://www.f2er.com/tag/jsfangbaidutupianliulan/" class="tag_link" target="_blank">js仿百度图片浏览</a><a href="https://www.f2er.com/tag/jstupianliulanxiaoguo/" class="tag_link" target="_blank">js图片浏览效果</a></div> <ul class="list-group"> <li class="list-group-item"><a href="https://www.f2er.com/js/44255.html" title="Asp.Net之JS生成分页条的方法">上一篇：Asp.Net之JS生成分页条的方法</a><a href="https://www.f2er.com/js/44252.html" title="domReady的实现案例" class="text-muted pull-right">下一篇：domReady的实现案例</a> </li> </ul> </div> </div> </div>  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的JavaScript相关文章</h1></div> <div class="list_con"> <a href="https://www.f2er.com/js/997747.html" title="Javascript中的事件冒泡与捕获"><div class="title">Javascript中的事件冒泡与捕获</div> <div class="summary">事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/02-22/19/e40e1eb184cb2a5d8c5f6c5e730d8e82.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">搞懂js中小数运算精度问题原因及解决办法</div> <div class="summary">js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理"><div class="title">搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理</div> <div class="summary">什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码"><div class="title">前端对base64编码的理解，原生js实现字符base64编码</div> <div class="summary">@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式"><div class="title">搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式</div> <div class="summary">搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="https://www.f2er.com/js/997318.html" title="js判断浏览器是否支持webGL"><div class="title">js判断浏览器是否支持webGL</div> <div class="summary">起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997317.html" title="js判断undefined和null"><div class="title">js判断undefined和null</div> <div class="summary">js判断undefined js判断null js判断null和undefined</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997316.html" title="将文字自动转为banner打印形式的工具"><div class="title">将文字自动转为banner打印形式的工具</div> <div class="summary">http://patorjk.com/software/taag/</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997315.html" title="聊一聊 bootstrap 的轮播图插件"><div class="title">聊一聊 bootstrap 的轮播图插件</div> <div class="summary">今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997314.html" title="js实现图片无缝循环跑马灯"><div class="title">js实现图片无缝循环跑马灯</div> <div class="summary">html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div>   <div class="col-sm-12 col-md-12 col-lg-3">  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="https://www.f2er.com/html/" title="HTML">HTML</a><a href="https://www.f2er.com/html5/" title="HTML5">HTML5</a><a href="https://www.f2er.com/js/" title="JavaScript">JavaScript</a><a href="https://www.f2er.com/css/" title="CSS">CSS</a><a href="https://www.f2er.com/jquery/" title="jQuery">jQuery</a><a href="https://www.f2er.com/bootstrap/" title="Bootstrap">Bootstrap</a><a href="https://www.f2er.com/angularjs/" title="Angularjs">Angularjs</a><a href="https://www.f2er.com/typescript/" title="TypeScript">TypeScript</a><a href="https://www.f2er.com/vue/" title="Vue">Vue</a><a href="https://www.f2er.com/dojo/" title="Dojo">Dojo</a><a href="https://www.f2er.com/json/" title="Json">Json</a><a href="https://www.f2er.com/electron/" title="Electron">Electron</a><a href="https://www.f2er.com/nodejs/" title="Node.js">Node.js</a><a href="https://www.f2er.com/extjs/" title="extjs">extjs</a><a href="https://www.f2er.com/express/" title="Express ">Express </a><a href="https://www.f2er.com/xml/" title="XML">XML</a><a href="https://www.f2er.com/es6/" title="ES6">ES6</a><a href="https://www.f2er.com/ajax/" title="Ajax">Ajax</a><a href="https://www.f2er.com/flash/" title="Flash">Flash</a><a href="https://www.f2er.com/unity/" title="Unity">Unity</a><a href="https://www.f2er.com/react/" title="React">React</a><a href="https://www.f2er.com/flex/" title="Flex">Flex</a><a href="https://www.f2er.com/antdesign/" title="Ant Design">Ant Design</a><a href="https://www.f2er.com/webfrontend/" title="Web前端">Web前端</a><a href="https://www.f2er.com/weapp/" title="微信小程序">微信小程序</a><a href="https://www.f2er.com/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.f2er.com/js/997747.html" title="Javascript中的事件冒泡与捕获" target="_blank">• Javascript中的事件冒泡与</a></li> <li><a href="https://www.f2er.com/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法" target="_blank">• 搞懂js中小数运算精度问题</a></li> <li><a href="https://www.f2er.com/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理" target="_blank">• 搞懂：前端跨域问题JS解决</a></li> <li><a href="https://www.f2er.com/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码" target="_blank">• 前端对base64编码的理解，</a></li> <li><a href="https://www.f2er.com/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式" target="_blank">• 搞懂：MVVM模型以及VUE中的</a></li> <li><a href="https://www.f2er.com/js/997493.html" title="js实现横向跑马灯效果" target="_blank">• js实现横向跑马灯效果</a></li> <li><a href="https://www.f2er.com/js/997318.html" title="js判断浏览器是否支持webGL" target="_blank">• js判断浏览器是否支持webG</a></li> <li><a href="https://www.f2er.com/js/997317.html" title="js判断undefined和null" target="_blank">• js判断undefined和null</a></li> <li><a href="https://www.f2er.com/js/997316.html" title="将文字自动转为banner打印形式的工具" target="_blank">• 将文字自动转为banner打印</a></li> <li><a href="https://www.f2er.com/js/997315.html" title="聊一聊 bootstrap 的轮播图插件" target="_blank">• 聊一聊 bootstrap 的轮播图</a></li> </ul> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="https://www.f2er.com/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="https://www.f2er.com/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="https://www.f2er.com/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="https://www.f2er.com/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="https://www.f2er.com/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="https://www.f2er.com/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="https://www.f2er.com/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="https://www.f2er.com/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="https://www.f2er.com/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="https://www.f2er.com/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="https://www.f2er.com/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="https://www.f2er.com/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="https://www.f2er.com/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="https://www.f2er.com/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="https://www.f2er.com/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="https://www.f2er.com/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="https://www.f2er.com/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="https://www.f2er.com/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="https://www.f2er.com/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="https://www.f2er.com/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="https://www.f2er.com/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="https://www.f2er.com/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="https://www.f2er.com/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="https://www.f2er.com/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="https://www.f2er.com/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="https://www.f2er.com/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="https://www.f2er.com/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="https://www.f2er.com/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="https://www.f2er.com/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="https://www.f2er.com/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="https://www.f2er.com/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>  </div>  </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="https://www.f2er.com/faq/884225.html" title="jQuery选择伪元素：after" target="_blank">· jQuery选择伪元素：after</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884224.html" title="JavaScript随机颜色生成器" target="_blank">· JavaScript随机颜色生成器</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884223.html" title="JavaScript指数" target="_blank">· JavaScript指数</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884222.html" title="addResourceHandlers无法解析静态资源" target="_blank">· addResourceHandlers无法解析静态资源</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884221.html" title="如何将字节数组转换为MultipartFile" target="_blank">· 如何将字节数组转换为MultipartFile</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884220.html" title="在java中如何创建一个文件并写入内容？" target="_blank">· 在java中如何创建一个文件并写入内容？</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884219.html" title="星号*在Python中是什么意思？" target="_blank">· 星号*在Python中是什么意思？</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884218.html" title="Flask框架：MVC模式" target="_blank">· Flask框架：MVC模式</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884217.html" title="在JavaScript对象数组中按ID查找对象" target="_blank">· 在JavaScript对象数组中按ID查找对象</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884216.html" title="使用Javascript / jQuery下载文件" target="_blank">· 使用Javascript / jQuery下载文件</a><span class="text-muted pull-right">10-20</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="https://www.f2er.com" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="https://www.f2er.com/js/base.js"></script> </body> </html>