首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
jQuery实现倒计时（倒计时年月日可自己输入）
Dec 02 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
解决$store.getters调用不执行的问题
Nov 08 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
Mysql8(2) 黑屏(2) SeaTable(1) ACID(1) celery(1) Windows server 2003(1) appdata(1) minio(1) OOP(1) Outlook(1)
You might like
PHP输入流php://input介绍
2012/09/18 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
socket.io学习教程之基本应用（二）
2017/04/29 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
浅析JavaScript中的平稳退化（graceful degradation）
2017/07/24 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
Less 安装及基本用法
2018/05/05 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
美国益智玩具购物网站：Fat Brain Toys
2017/11/03 全球购物
Quiksilver美国官网：始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
大学生简单自荐信
2013/11/10 职场文书
三个儿子教学反思
2014/02/03 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
工会主席事迹材料
2014/06/03 职场文书
宣传口号大全
2014/06/16 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
团队拓展训练感想
2015/08/07 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
检讨书格式
2019/04/25 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
7个关于Python的经典基础案例
2021/11/07 Python
MySQL多表查询机制
2022/03/17 MySQL