首页
所有分类
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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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
原理(1) 鉴频器(1) 探测器(1) 春雷3P7(1) 发烧友(1) 频偏(1) 电路(15) 单管机(1) 实习报告(1) AM(1)
You might like
PHP JSON 数据解析代码
2010/05/26 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
Javascript 设计模式（二） 闭包
2010/05/26 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery 选取方法都有哪些
2014/05/18 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python字符串格式化的方法（两种）
2017/09/19 Python
pygame实现贪吃蛇游戏（下）
2019/10/29 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Django实现随机图形验证码的示例
2020/10/15 Python
夏威夷咖啡公司：Hawaii Coffee Company
2019/09/19 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
工伤赔偿协议书
2014/04/15 职场文书
《得道多助，失道寡助》教学反思
2014/04/19 职场文书
大学生联谊活动策划书（光棍节）
2014/10/10 职场文书
成本会计实训报告
2014/11/05 职场文书
教师节祝酒词
2015/08/11 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
python blinker 信号库
2022/05/04 Python