编程 Javascript

JavaScript仿百度图片浏览效果

Posted in Javascript onNovember 23, 2016

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

在线地址：http://www.hui12.com/nbin/demo/imgskim/index.html
https://nbin2008.github.io/demo/imgskim/index.html

效果图：

JavaScript仿百度图片浏览效果

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(); 
    } 
  } 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript仿百度图片浏览效果

- Author -

nbin斌

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jsTree树控件(基于jQuery, 超强悍)[推荐]

Sep 01 Javascript

JavaScript新窗口与子窗口传值详解

Feb 11 Javascript

js数组如何添加json数据及js数组与json的区别

Oct 27 Javascript

jQuery Easyui实现左右布局

Jan 26 Javascript

在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法

Aug 05 Javascript

Backbone View 之间通信的三种方式

Aug 09 Javascript

移动端日期插件Mobiscroll.js使用详解

Dec 19 Javascript

Vue官方文档梳理之全局配置

Nov 22 Javascript

Vue CLI3基础学习之pages构建多页应用

Jun 02 Javascript

如何使用JavaScript检测空闲的浏览器选项卡

May 28 Javascript

Vue中nprogress页面加载进度条的方法实现

Nov 13 Javascript

微信小程序向Java后台传输参数的方法实现

Dec 10 Javascript

Asp.Net之JS生成分页条的方法

Nov 23 #Javascript

javascript判断firebug是否开启的方法

Nov 23 #Javascript

JavaScript表单验证开发

Nov 23 #Javascript

JavaScript实现垂直向上无缝滚动特效代码

Nov 23 #Javascript

分类解析jQuery选择器

Nov 23 #Javascript

概述jQuery的元素筛选

Nov 23 #Javascript

JS实用的带停顿的逐行文本循环滚动效果实例

Nov 23 #Javascript