首页
所有分类
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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
在VUE中实现文件下载并判断状态的方法
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
openGauss(1) Word(2) 弹窗(1) ant design(2) JDBC(3) cypress(1) Eclipse(1) 太阳码(1) pdf(1) 延时任务(1)
You might like
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP微信支付开发实例
2016/06/22 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
jQuery 选择器理解
2010/03/16 Javascript
jquery 图片 上一张 下一张 链接效果（续篇）
2010/04/20 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
JavaScript高级程序设计阅读笔记（六） ECMAScript中的运算符（二）
2012/02/27 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JS中的作用域链
2017/03/01 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python魔术方法专题
2020/06/19 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店：991.com
2018/05/03 全球购物
标记环介质访问控制协议
2016/03/27 面试题
校本教研工作方案
2014/01/14 职场文书
考博专家推荐信
2014/05/10 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
关于远足的感想
2015/08/10 职场文书
以下牛机，你有几个
2022/04/05 无线电
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技