本文实例为大家分享了js图片浏览效果的具体代码，供大家参考，具体内容如下
在线地址：http://www.hui12.com/nbin/demo/imgskim/index.html
https://nbin2008.github.io/demo/imgskim/index.html
效果图：
index
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿百度图片浏览</title> <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="imgBox1"> <img src="" class="img1"/> </div> </div> <!-- 图片选择 --> <div class="chooseImg1_box"> <div class="navList1"> <span class="btnImgList">图片列表<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="boxLimit1"> <a href="javascript:;" class="chooseImg1_btnLeft"></a> <div class="imgListBox1"> <ul class="imgList1"></ul> </div> <a href="javascript:;" class="chooseImg1_btnRight"></a> </div> </div> </div> <div class="sider1"> <p class="pTroTit1"></p> <p class="pTroName1"></p> </div> </div> <!-- 全屏 --> <div class="container2"> <div class="chooseTimeBox"> <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> <!-- main --> <div class="imgBox2"> <img src="" class="img2" /> </div> <a href="javascript:;" class="showImg2_btnLeft"></a> <a href="javascript:;" class="showImg2_btnRight"></a> <div class="imgListBox2"> <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> </body> </html>
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; } /* container1 */ .container1{ width: 100%; height: 100%; background-color: #f6f6f6; position: absolute; min-width: 1000px; min-height: 400px; -display: none; } .main1{ position: absolute; width: calc(100% - 310px); height: calc(100% - 5px); left: 0; top: 5px; background-color: #fff; } .sider1{ position: absolute; width: 300px; margin-left: 10px; height: calc(100% - 5px); overflow-x: hidden; overflow-y: auto; top: 5px; right: 0px; background-color: #fff; } .showImg1{ width: 100%; position: relative; } .showImg1 a{ position: absolute; width: 70px; height: 100%; top: 0; background-color: #fff; transition: all 0.5s; } .showImg1 a:hover{ background-color: #e6e6e6; } .showImg1 a:before{ content: ''; display: block; position: absolute; width: 40px; height: 72px; background: url(../images/btn.png); left: calc(50% - 20px); top: calc(50% - 31px); } .showImg1 .showImg1_btnLeft{ left: 0; } .showImg1 .showImg1_btnRight{ right: 0; } .showImg1 .showImg1_btnLeft:before{ background-position: 0 -87px; } .showImg1 .showImg1_btnLeft:hover:before{ background-position: -46px -87px; } .showImg1 .showImg1_btnRight:before{ background-position: 0 0; } .showImg1 .showImg1_btnRight:hover:before{ background-position: -46px 0; } .showImg1 .imgBox1{ position: absolute; width: calc(100% - 144px); height: calc(100% - 4px); left: 72px; top: 2px; overflow: hidden; } .showImg1 .imgBox1 .img1{ position: absolute; display: block; } .chooseImg1_box{ position: relative; overflow: hidden; } .navList1{ height: 38px; line-height: 38px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; text-align: center; font-size: 14px; } .navList1 span{ margin-left: -3px; } .navList1 span, .navList1 a{ display: inline-block; color: #666; padding: 0 10px; cursor: pointer; position: relative; } .navList1 span:before{ content: '|'; display: block; position: absolute; left: -3px; color: #e3e3e3; } .navList1 span:hover:before{ display: none; } .navList1 span:last-child:after{ content: '|'; display: block; position: absolute; right: 1px; color: #e3e3e3; } .navList1 span:hover, .navList1 a:hover{ background-color: #e3e3e3; } .navList1 .btnImgScale, .navList1 .btnImgScale:hover{ cursor: default; background-color: #fff; padding: 0; } .navList1 a{ padding: 0; width: 30px; } .boxLimit1{ position: relative; width: 100%; height: 100px } .boxLimit1 a{ float: left; display: block; width: 25px; height: 70px; margin: 15px 2px 0; position: relative; } .boxLimit1 a:hover{ background-color: #e6e6e6; } .boxLimit1 a.disable{ background-color: #fff; } .boxLimit1 a:before{ content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png); } .boxLimit1 .chooseImg1_btnLeft:before, .boxLimit1 .chooseImg1_btnLeft.disable:hover:before{ background-position: -27px -174px; } .boxLimit1 .chooseImg1_btnLeft.disable:hover:before{ cursor: default; } .boxLimit1 .chooseImg1_btnLeft:hover:before{ background-position: -73px -174px; } .boxLimit1 .chooseImg1_btnRight:before, .boxLimit1 .chooseImg1_btnRight.disable:hover:before{ background-position: 0 -174px; } .boxLimit1 .chooseImg1_btnRight.disable:hover:before{ cursor: default; } .boxLimit1 .chooseImg1_btnRight:hover:before{ background-position: -46px -174px; } .imgListBox1{ position: relative; width: calc(100% - 58px); height: 90px; padding: 4px 0 6px; float: left; overflow: hidden; } .imgListBox1 .imgList1{ padding-top: 5px; position: absolute; left: 0; top: 0; transition: left 0.5s; float: left; } .imgListBox1 .imgList1 li{ 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; } .imgListBox1 .imgList1 li.active{ width: 76px; height: 76px; border: 2px solid #3388fb; margin-top: 5px; background-image: url(../images/a1.jpg); } /* 全屏 */ .container2{ width: 100%; height: 100%; background-color: #262626; position: absolute; display: none; } .btnExitFullScreen{ color: #989898; position: absolute; top: 1%; right: 1%; font-size: 20px; line-height: 20px; } .chooseTimeBox{ position: absolute; width: 70px; text-align: center; height: 20px; line-height: 20px; background-color: #3d3d3d; left: calc(50% - 35px); top: 1.5%; } .chooseTimeBox *{ color: #e1e1e1; } .chooseTimeBox .select{ background: #121212; color: #999999; width: 40px; height: 18px; left: 2px; top:1px; outline: none; display: none; float: left; position: relative; top: 1px; } .chooseTimeBox .btnStart{ -display: none; } .chooseTimeBox .btnStop{ display: none; position: relative; top: -1px; } .imgBox2{ position: absolute; width: 70%; height: calc(90% - 144px); -border: 1px solid red; left: 15%; top: 8%; } .imgBox2 img{ position: absolute; } .showImg2_btnLeft, .showImg2_btnRight{ width: 50%; height: calc(90% - 144px); position: absolute; top: 8%; -border: 1px solid #fff; } .showImg2_btnLeft{ left: 0; cursor: url(../images/cur_left.jpg),auto;; } .showImg2_btnRight{ right: 0; cursor: url(../images/cur_right.jpg),auto;; } .imgListBox2{ position: absolute; width: 80%; height: 140px; border: 1px solid #3e3e3e; left: 10%; bottom: 2%; overflow: hidden; } .imgList2{ position: absolute; left: 0; top: 0; width: 100%; height: 110px; top: 15px; transition: left 0.5s; } .imgList2 li{ width: 110px; height: 110px; box-sizing: border-box; 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; } .imgList2 li.active{ border: 2px solid #2f95d5; } .container2 .aBtn{ position: absolute; display: block; width: 25px; height: 70px; margin: 15px 2px 0; } .container2 .aBtn:hover{ background-color: #e6e6e6; } .container2 .aBtn.disable{ background-color: #fff; } .container2 .aBtn:before{ content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png); } .container2 .chooseImg2_btnLeft{ left: calc(10% - 50px); bottom: calc(2% + 35px); } .container2 .chooseImg2_btnRight{ right: calc(10% - 50px); bottom: calc(2% + 35px); } .container2 .chooseImg2_btnLeft:before, .container2 .chooseImg2_btnLeft.disable:hover:before{ background-position: -27px -174px; } .container2 .chooseImg2_btnLeft.disable:hover:before{ cursor: default; } .container2 .chooseImg2_btnLeft:hover:before{ background-position: -73px -174px; } .container2 .chooseImg2_btnRight:before, .container2 .chooseImg2_btnRight.disable:hover:before{ background-position: 0 -174px; } .container2 .chooseImg2_btnRight.disable:hover:before{ cursor: default; } .container2 .chooseImg2_btnRight:hover:before{ background-position: -46px -174px; } data.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', name: '火影忍着3' }, { 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' } ]; handleImage.js
(function(window,$){ function HandleImage(e){ this.init(e); }; var proto = { init: function(e){ this.nb = {}; this.nb.$box = e.box; this.nb.$img = e.img; this.setBoxWH(); this.imgMouseEvent(); }, //对外提供，重置盒子的宽高，resize事件需要调用 setBoxWH: function(){ this.nb.bWidth = this.nb.$box.width(); this.nb.bHeight = this.nb.$box.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; }, //对外提供，输入图片地址,isNormal：true（初始不缩放） setImg: function(src,isNormal,callback){ this.getImgWH(src,isNormal,callback); this.nb.$img.attr('src',src); }, //初始化图片位置 setStartPosition: function(isNormal){ var self = this; var bW = self.nb.bWidth = self.nb.$box.width(); <span style="white-space:pre"> </span>bH = self.nb.bHeight = self.nb.$box.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; }, //对外提供，改变图片大小 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(); }, //对外提供，获取缩放比例 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); index.js
$(document).ready(function(){ var $win = $(window), $con1 = $('.container1'), $main1 = $('.main1'), $showImg1 = $('.showImg1'), $showImg1_btnLeft = $('.showImg1_btnLeft'), $showImg1_btnRight = $('.showImg1_btnRight'), $imgBox1 = $('.imgBox1'), $img1 = $('.img1'), $showImg1_btnLeft = $('.showImg1_btnLeft'), $showImg1_btnRight = $('.showImg1_btnRight'), $chooseImg1_btnLeft = $('.chooseImg1_btnLeft'), $chooseImg1_btnRight = $('.chooseImg1_btnRight'), $chooseImg1_box = $('.chooseImg1_box'), $scale1 = $('.scale1'), $btnImgInit1 = $('.btnImgInit1'), $btnImgFullScreen = $('.btnImgFullScreen'), $sider1 = $('.sider1'), $imgListBox1 = $('.imgListBox1'), $imgList1 = $('.imgList1'); //container2-fullscreen对象 var $con2 = $('.container2'), $select = $('.select'), $btnStart = $('.btnStart'), $btnStop = $('.btnStop'), $btnExitFullScreen = $('.btnExitFullScreen'), $imgBox2 = $('.imgBox2'), $img2 = $('.img2'), $showImg2_btnLeft = $('.showImg2_btnLeft'), $showImg2_btnRight = $('.showImg2_btnRight'), $chooseImg2_btnLeft = $('.chooseImg2_btnLeft'), $chooseImg2_btnRight = $('.chooseImg2_btnRight'), $imgListBox2 = $('.imgListBox2'), $imgList2 = $('.imgList2'); var winW = $win.width(), winH = $win.height(); //图片处理事件 var h1; var handle = { init1: function(){ h1 = new HandleImage({ box: $imgBox1, img: $img1 }); }, setImg1: function(src,isNormal){ h1.setImg(src,isNormal,function(){ imgListEvent.setScaleText(); }); } }; //窗口改变事件 var envFunc = { fnSize: function(){ $(window).on('resize',function(){ winW = $win.width(), winH = $win.height(); containEvent.setCon(); containEvent.setShowImg1_height(); imgListEvent.imgList1_position(); h1.setBoxWH(); }); } }; envFunc.fnSize(); //cantanier事件 var containEvent = { init: function(){ this.setCon(); this.setShowImg1_height(); handle.init1(); }, //设置container宽高 setCon: function(){ $con1.css({ 'width': winW, 'height': winH }); $con2.css({ 'width': winW, 'height': winH }); }, //设置图片控制区高 setShowImg1_height: function(){ $showImg1.css({ 'height': $main1.height() - $chooseImg1_box.height() }) }, showText: function(data){ $('.pTroTit1').text(data['src']); $('.pTroName1').text(data['title']); } }; containEvent.init(); //图片选择 普通的width：70+10, 选中active：80+10 var $liActive_1; var index = 0; var imgListEvent = { init: function(){ this.imgList1_add(); this.imgList1_click(); this.scaleEvent(); this.mouseWheelEvent(); this.fnClick(); }, imgList1_add: function(){ var str = '' for( var i=0; i<imgData.length; i++ ){ var tmp = imgData[i]; str += '<li style="background-image:url('+ tmp.src +')" ></li>' }; $imgList1.append(str); $imgList1.css({ 'width': (70+10)*imgData.length + 10 }); }, imgList1_click: function(){ var self = this; $imgList1.find('li').on('click',function(){ if( $liActive_1 ) $liActive_1.removeClass('active'); index = $(this).index(); $(this).addClass('active'); $liActive_1 = $(this); self.imgList1_position(); handle.setImg1( imgData[index]['src'] ); containEvent.showText( imgData[index] ); }); $imgList1.find('li').eq(0).trigger('click'); }, imgList1_position: function(){ var boxWidth1 = $imgListBox1.width(); var le = (boxWidth1/2 - index*80); le = Math.floor(le/80)*80; le = le>=0?0:le; var maxLe = (boxWidth1-$imgList1.width())+10; le = le<maxLe?maxLe:le; $imgList1.css({ 'left': le }) }, scaleEvent: function(){ var timer = null; var btnPos = { x: null, y: null }; var fnCallback = function(){ imgListEvent.setScaleText(); }; $('.scaleAdd1').on('mousedown',function(e){ h1.setScale('plus',fnCallback); checkBtnPos(e); timer = setTimeout(function(){ fnAnimate('plus'); },500); }); $('.scaleReduce1').on('mousedown',function(e){ h1.setScale('reduce',fnCallback); checkBtnPos(e); timer = setTimeout(function(){ fnAnimate('reduce'); },500); }); $('.scaleAdd1').add($('.scaleReduce1')).on('mouseup',function(){ clearInterval(timer); return false; }); $('.scaleAdd1').add($('.scaleReduce1')).on('mousemove',function(e){ if( Math.abs(e.pageX-btnPos.x)>=5 || Math.abs(e.pageY-btnPos.y)>=5 ){ clearInterval(timer); }; return false; }); function checkBtnPos(e){ btnPos.x = e.pageX; btnPos.y = e.pageY; }; function fnAnimate(str){ if( str == 'plus' ){ timer = setInterval(function(){ h1.setScale('plus',fnCallback); },30); }else if( str == 'reduce'){ timer = setInterval(function(){ h1.setScale('reduce',fnCallback); },30) }; }; }, mouseWheelEvent: function(){ var imgBox1 = $imgBox1.get(0); if( document.attachEvent ){ imgBox1.attachEvent('onmousewheel',move) }; if( document.addEventListener ){ imgBox1.addEventListener('mousewheel',move,false); imgBox1.addEventListener('mousewheel',move,false); }; var fnCallback = function(){ imgListEvent.setScaleText(); }; function move(e){ var up = true; if( e.wheelDelta ){ up = e.wheelDelta > 0 ? true : false; }; if( e.detail ){ up = e.detail < 0 ? true : false; }; if( up ){ h1.setScale('plus',fnCallback); }else{ h1.setScale('reduce',fnCallback); }; if( e.preventDefault ){ e.preventDefault(); }else{ e.returnValue = false; } }; }, setScaleText: function(){ var scale = Math.round(h1.getScale()*100); $scale1.text(scale+'%'); }, fnClick: function(){ $showImg1_btnRight.on('click',function(){ $liActive_1.next().trigger('click'); }); $showImg1_btnLeft.on('click',function(){ $liActive_1.prev().trigger('click'); }); $chooseImg1_btnLeft.on('click',function(){ var w = $imgListBox1.width(); var le = parseInt($imgList1.css('left')) + w; if( le > 0 ) le = 0; $imgList1.css({ 'left': le }) }); $chooseImg1_btnRight.on('click',function(){ var w = $imgListBox1.width(); var minLe = w - $imgList1.width(); var le = parseInt($imgList1.css('left')) - w; if( le < minLe ) le = minLe; $imgList1.css({ 'left': le }) }); $btnImgInit1.on('click',function(){ handle.setImg1( imgData[index]['src'], true ); }); $btnImgFullScreen.on('click',function(){ fullScreen.enterFull(); }); } }; imgListEvent.init(); /* * container2 */ var $liActive_2; var timer2; function setImg2(src){ $imgBox2; $img2; var bW,bH,mW,mH; var img = new Image(); $img2.attr('src',src); img.onload = function(){ mW = img.width; mH = img.height; bW = $imgBox2.width(); bH = $imgBox2.height(); setPosition(); }; img.src = src; function setPosition(){ var sScale = Math.min(bW/mW,bH/mH); if( sScale>=1 ){ $img2.css({ 'width': mW, 'height': mH, 'left': (bW-mW)/2, 'top': (bH-mH)/2 }); }else{ $img2.css({ 'width': mW*sScale, 'height': mH*sScale, 'left': (bW-mW*sScale)/2, 'top': (bH-mH*sScale)/2 }); }; }; }; var fullScreen = { init: function(){ this.addImg(); this.addClick(); }, addImg: function(){ var str = '' for( var i=0; i<imgData.length; i++ ){ var tmp = imgData[i]; str += '<li style="background-image:url('+ tmp.src +')" ></li>' }; $imgList2.append(str); $imgList2.css({ 'width': 115*imgData.length }); }, addClick: function(){ var self = this; $imgList2.find('li').on('click',function(){ if( $liActive_2 ) $liActive_2.removeClass('active'); index = $(this).index(); $(this).addClass('active'); $liActive_2 = $(this); self.imgList2_position(); setImg2( imgData[index]['src'] ); }); $showImg2_btnRight.on('click',function(){ $liActive_2.next().trigger('click'); }); $showImg2_btnLeft.on('click',function(){ $liActive_2.prev().trigger('click'); }); $chooseImg2_btnLeft.on('click',function(){ var w = $imgListBox2.width(); var le = parseInt($imgList2.css('left')) + w; if( le > 0 ) le = 0; $imgList2.css({ 'left': le }) }); $chooseImg2_btnRight.on('click',function(){ var w = $imgListBox2.width(); var minLe = w - $imgList2.width(); var le = parseInt($imgList2.css('left')) - w; if( le < minLe ) le = minLe; $imgList2.css({ 'left': le }) }); $btnExitFullScreen.on('click',function(){ self.exitFull(); }); }, imgList2_position: function(){ var boxWidth2 = $imgListBox2.width(); var le = (boxWidth2/2 - index*115); le = Math.floor(le/115)*115; le = le>=0?0:le; var maxLe = (boxWidth2-$imgList2.width()); le = le<maxLe?maxLe:le; $imgList2.css({ 'left': le }); }, enterFull: function(){ var self = this; enterFullscreen(); $con1.css('opacity','0'); $con2.show(); setTimeout(function(){ $imgList2.find('li').eq(index).trigger('click'); },500); //esc keyCode:27 $(document).on('keyup.a',function(e){ if( e.keyCode == 27 ){ self.exitFull(); }; }); }, exitFull: function(){ clearInterval(timer2); $(document).off('keyup.a'); $con1.css('opacity','1'); $con2.hide(); animateEvent.showStart(); setTimeout(function(){ <span style="white-space:pre"> </span>$imgList1.find('li').eq(index).trigger('click'); <span style="white-space:pre"> </span>},500); exitFullscreen(); } }; fullScreen.init(); // fullScreen.enterFull(); //定时器 var animateEvent = { init: function(){ var self = this; $btnStart.on('click',function(){ self.start(); }); $btnStop.on('click',function(){ self.stop(); }); $select.on('change',function(){ self.start(); }); }, start: function(){ this.showStop(); var intervalTime = parseInt($select.val())*1000; clearInterval(timer2); timer2 = setInterval(function(){ $liActive_2.next().trigger('click'); },intervalTime); }, stop: function(){ clearInterval(timer2); this.showStart(); }, showStart: function(){ clearInterval(timer2); $select.show().val('2'); $select.hide(); $btnStop.hide(); $btnStart.show(); }, showStop: function(){ $btnStart.hide(); $btnStop.show(); $select.show(); } }; animateEvent.init(); /* * 全屏事件 */ // 判断各种浏览器 function enterFullscreen() { var element = document.documentElement; if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } // 判断浏览器种类 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } }); 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
