JavaScript仿百度图片浏览效果_javascript技巧

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

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

效果图：

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>仿百度图片浏览</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/data.js"></script>
    <script src="js/handleImage.js"></script>
    <script src="js/index.js"></script>
  </head>
  <body>
    <div class="container1">
      <div class="main1">
        <!-- 图片显示 -->
        <div class="showImg1">
          <a href="javascript:;" class="showImg1_btnLeft"></a>
          <a href="javascript:;" class="showImg1_btnRight"></a>
          <div class="imgBox1">
            <img src="" class="img1"/>
          </div>
        </div>
        <!-- 图片选择 -->
        <div class="chooseImg1_box">
          <div class="navList1">
            <span class="btnImgList">图片列表<i></i></span>
            <span class="btnImgScale">
              <a href="javascript:;" class="scaleAdd1">+</a>
              <b class="scale1">100%</b>
              <a href="javascript:;" class="scaleReduce1">-</a>
            </span>
            <span class="btnImgInit1">原始尺寸</span>
            <span class="btnImgFullScreen">全屏</span>
            <span>其他</span>
            <span>其他</span>
          </div>
          <div class="boxLimit1">
            <a href="javascript:;" class="chooseImg1_btnLeft"></a>
            <div class="imgListBox1">
              <ul class="imgList1"></ul>
            </div>
            <a href="javascript:;" class="chooseImg1_btnRight"></a>
          </div> 

        </div>
      </div>
      <div class="sider1">
        <p class="pTroTit1"></p>
        <p class="pTroName1"></p>
      </div>
    </div>
    <!-- 全屏 -->
    <div class="container2">
      <div class="chooseTimeBox">
        <select class="select">
          <option value="2">2s</option>
          <option value="3">3s</option>
          <option value="5">5s</option>
        </select>
        <a href="javascript:;" class="btnStart">开始</a>
        <a href="javascript:;" class="btnStop">||</a>
      </div>
      <!-- main -->
      <div class="imgBox2">
        <img src="" class="img2" />
      </div>
      <a href="javascript:;" class="showImg2_btnLeft"></a>
      <a href="javascript:;" class="showImg2_btnRight"></a>
      <div class="imgListBox2">
        <ul class="imgList2"></ul>
      </div>
      <a href="javascript:;" class="chooseImg2_btnLeft aBtn" ></a>
      <a href="javascript:;" class="chooseImg2_btnRight aBtn"></a>
      <a href="javascript:;" class="btnExitFullScreen">x</a>
    </div>
  </body>
</html>

css

/* common */
*{
  margin: 0; padding: 0;
}
body,html{
  font-family: "微软雅黑"; font-size: 12px; overflow: hidden;
}
li{
  list-style: none;
}
a{
  text-decoration: none; color: #000;
}
.btnIco{
  background: url(../images/btn.png);
}
b{
  font-weight: normal;
}
i{
  font-style: normal;
} 

/* container1 */
.container1{
  width: 100%; height: 100%; background-color: #f6f6f6; position: absolute; min-width: 1000px; min-height: 400px; -display: none;
}
.main1{
  position: absolute; width: calc(100% - 310px); height: calc(100% - 5px); left: 0; top: 5px; background-color: #fff;
}
.sider1{
  position: absolute; width: 300px; margin-left: 10px; height: calc(100% - 5px); overflow-x: hidden; overflow-y: auto; top: 5px; right: 0px; background-color: #fff;
}
.showImg1{
  width: 100%; position: relative;
}
.showImg1 a{
  position: absolute; width: 70px; height: 100%; top: 0; background-color: #fff; transition: all 0.5s;
}
.showImg1 a:hover{
  background-color: #e6e6e6;
}
.showImg1 a:before{
  content: ''; display: block; position: absolute; width: 40px; height: 72px; background: url(../images/btn.png); left: calc(50% - 20px); top: calc(50% - 31px);
}
.showImg1 .showImg1_btnLeft{
  left: 0;
}
.showImg1 .showImg1_btnRight{
  right: 0;
}
.showImg1 .showImg1_btnLeft:before{
  background-position: 0 -87px;
}
.showImg1 .showImg1_btnLeft:hover:before{
  background-position: -46px -87px;
}
.showImg1 .showImg1_btnRight:before{
  background-position: 0 0;
}
.showImg1 .showImg1_btnRight:hover:before{
  background-position: -46px 0;
}
.showImg1 .imgBox1{
  position: absolute; width: calc(100% - 144px); height: calc(100% - 4px); left: 72px; top: 2px; overflow: hidden;
}
.showImg1 .imgBox1 .img1{
  position: absolute; display: block;
}
.chooseImg1_box{
  position: relative; overflow: hidden;
}
.navList1{
  height: 38px; line-height: 38px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; text-align: center; font-size: 14px;
}
.navList1 span{
  margin-left: -3px;
}
.navList1 span, .navList1 a{
  display: inline-block; color: #666; padding: 0 10px; cursor: pointer; position: relative;
}
.navList1 span:before{
  content: '|'; display: block; position: absolute; left: -3px; color: #e3e3e3;
}
.navList1 span:hover:before{
  display: none;
}
.navList1 span:last-child:after{
  content: '|'; display: block; position: absolute; right: 1px; color: #e3e3e3;
}
.navList1 span:hover, .navList1 a:hover{
  background-color: #e3e3e3;
}
.navList1 .btnImgScale, .navList1 .btnImgScale:hover{
  cursor: default; background-color: #fff; padding: 0;
}
.navList1 a{
  padding: 0; width: 30px;
} 

.boxLimit1{
  position: relative; width: 100%; height: 100px
}
.boxLimit1 a{
  float: left; display: block; width: 25px; height: 70px; margin: 15px 2px 0; position: relative;
}
.boxLimit1 a:hover{
  background-color: #e6e6e6;
}
.boxLimit1 a.disable{
  background-color: #fff;
}
.boxLimit1 a:before{
  content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);
}
.boxLimit1 .chooseImg1_btnLeft:before, .boxLimit1 .chooseImg1_btnLeft.disable:hover:before{
  background-position: -27px -174px;
}
.boxLimit1 .chooseImg1_btnLeft.disable:hover:before{
  cursor: default;
}
.boxLimit1 .chooseImg1_btnLeft:hover:before{
  background-position: -73px -174px;
}
.boxLimit1 .chooseImg1_btnRight:before, .boxLimit1 .chooseImg1_btnRight.disable:hover:before{
  background-position: 0 -174px;
}
.boxLimit1 .chooseImg1_btnRight.disable:hover:before{
  cursor: default;
}
.boxLimit1 .chooseImg1_btnRight:hover:before{
  background-position: -46px -174px;
}
.imgListBox1{
  position: relative; width: calc(100% - 58px); height: 90px; padding: 4px 0 6px; float: left; overflow: hidden;
}
.imgListBox1 .imgList1{
  padding-top: 5px; position: absolute; left: 0; top: 0; transition: left 0.5s; float: left;
}
.imgListBox1 .imgList1 li{
  float: left; width: 68px; height: 68px; border: 1px solid #dfdfdf; margin-top: 10px; margin-right: 10px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;
}
.imgListBox1 .imgList1 li.active{
  width: 76px; height: 76px; border: 2px solid #3388fb; margin-top: 5px; background-image: url(../images/a1.jpg);
} 

/* 全屏 */
.container2{
  width: 100%; height: 100%; background-color: #262626; position: absolute; display: none;
}
.btnExitFullScreen{
  color: #989898; position: absolute; top: 1%; right: 1%; font-size: 20px; line-height: 20px;
}
.chooseTimeBox{
  position: absolute; width: 70px; text-align: center; height: 20px; line-height: 20px; background-color: #3d3d3d; left: calc(50% - 35px); top: 1.5%;
}
.chooseTimeBox *{
  color: #e1e1e1;
}
.chooseTimeBox .select{
  background: #121212; color: #999999; width: 40px; height: 18px; left: 2px; top:1px; outline: none; display: none; float: left; position: relative; top: 1px;
}
.chooseTimeBox .btnStart{
  -display: none;
}
.chooseTimeBox .btnStop{
  display: none; position: relative; top: -1px;
}
.imgBox2{
  position: absolute; width: 70%; height: calc(90% - 144px); -border: 1px solid red; left: 15%; top: 8%;
}
.imgBox2 img{
  position: absolute;
}
.showImg2_btnLeft, .showImg2_btnRight{
  width: 50%; height: calc(90% - 144px); position: absolute; top: 8%; -border: 1px solid #fff;
}
.showImg2_btnLeft{
  left: 0; cursor: url(../images/cur_left.jpg),auto;;
}
.showImg2_btnRight{
  right: 0; cursor: url(../images/cur_right.jpg),auto;;
}
.imgListBox2{
  position: absolute; width: 80%; height: 140px; border: 1px solid #3e3e3e; left: 10%; bottom: 2%; overflow: hidden;
}
.imgList2{
  position: absolute; left: 0; top: 0; width: 100%; height: 110px; top: 15px; transition: left 0.5s;
}
.imgList2 li{
  width: 110px; height: 110px; box-sizing: border-box; border: 1px solid #707070; float: left; margin-right: 5px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;
}
.imgList2 li.active{
  border: 2px solid #2f95d5;
} 

.container2 .aBtn{
  position: absolute; display: block; width: 25px; height: 70px; margin: 15px 2px 0;
}
.container2 .aBtn:hover{
  background-color: #e6e6e6;
}
.container2 .aBtn.disable{
  background-color: #fff;
}
.container2 .aBtn:before{
  content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);
}
.container2 .chooseImg2_btnLeft{
  left: calc(10% - 50px); bottom: calc(2% + 35px);
}
.container2 .chooseImg2_btnRight{
  right: calc(10% - 50px); bottom: calc(2% + 35px);
}
.container2 .chooseImg2_btnLeft:before, .container2 .chooseImg2_btnLeft.disable:hover:before{
  background-position: -27px -174px;
}
.container2 .chooseImg2_btnLeft.disable:hover:before{
  cursor: default;
}
.container2 .chooseImg2_btnLeft:hover:before{
  background-position: -73px -174px;
}
.container2 .chooseImg2_btnRight:before, .container2 .chooseImg2_btnRight.disable:hover:before{
  background-position: 0 -174px;
}
.container2 .chooseImg2_btnRight.disable:hover:before{
  cursor: default;
}
.container2 .chooseImg2_btnRight:hover:before{
  background-position: -46px -174px;
}

data.js

var imgData = [
  {
    src: 'images/a1.jpg',
    title: 'a1.jpg',
    name: '火影忍着1'
  },
  {
    src: 'images/a2.jpg',
    title: 'a2.jpg',
    name: '火影忍着3'
  },
  {
    src: 'images/a3.jpg',
    title: 'a3.jpg',
    name: '火影忍着3'
  },
  {
    src: 'images/a4.jpg',
    title: 'a4.jpg',
    name: '火影忍着4'
  },
  {
    src: 'images/a5.jpg',
    title: 'a5.jpg',
    name: '火影忍着5'
  },
  {
    src: 'images/a6.jpg',
    title: 'a6.jpg',
    name: '火影忍着6'
  },
  {
    src: 'images/a7.jpg',
    title: 'a7.jpg',
    name: '火影忍着7'
  },
  {
    src: 'images/a8.jpg',
    title: 'a8.jpg',
    name: '火影忍着8'
  },
  {
    src: 'images/a9.jpg',
    title: 'a9.jpg',
    name: '火影忍着9'
  },
  {
    src: 'images/a10.jpg',
    title: 'a10.jpg',
    name: '火影忍着10'
  },
  {
    src: 'images/a11.jpg',
    title: 'a11.jpg',
    name: '火影忍着11'
  },
  {
    src: 'images/a12.jpg',
    title: 'a12.jpg',
    name: '火影忍着12'
  },
  {
    src: 'images/a13.jpg',
    title: 'a13.jpg',
    name: '火影忍着13'
  },
  {
    src: 'images/a14.jpg',
    title: 'a14.jpg',
    name: '火影忍着14'
  },
  {
    src: 'images/a15.jpg',
    title: 'a15.jpg',
    name: '火影忍着15'
  },
  {
    src: 'images/a16.jpg',
    title: 'a16.jpg',
    name: '火影忍着16'
  },
  {
    src: 'images/a17.jpg',
    title: 'a17.jpg',
    name: '火影忍着17'
  },
  {
    src: 'images/a18.jpg',
    title: 'a18.jpg',
    name: '火影忍着18'
  },
  {
    src: 'images/a19.jpg',
    title: 'a19.jpg',
    name: '火影忍着19'
  },
  {
    src: 'images/a20.jpg',
    title: 'a20.jpg',
    name: '火影忍着20'
  }
];

handleImage.js

(function(window,$){
  function HandleImage(e){
    this.init(e);
  };
  var proto = {
    init: function(e){
      this.nb = {};
      this.nb.$box = e.box;
      this.nb.$img = e.img;
      this.setBoxWH();
      this.imgMouseEvent();
    },
    //对外提供，重置盒子的宽高，resize事件需要调用
    setBoxWH: function(){
      this.nb.bWidth = this.nb.$box.width();
      this.nb.bHeight = this.nb.$box.height();
    },
    getImgWH: function(src,isNormal,callback){
      var self = this;
      var img = new Image();
      img.onload = function(){
        self.nb.mWidth = img.width;
        self.nb.mHeight = img.height;
        self.setStartPosition(isNormal);
        callback && callback();
      };
      img.src = src;
    },
    //对外提供，输入图片地址,isNormal：true（初始不缩放）
    setImg: function(src,isNormal,callback){
      this.getImgWH(src,isNormal,callback);
      this.nb.$img.attr('src',src);
    },
    //初始化图片位置
    setStartPosition: function(isNormal){
      var self = this;
      var bW = self.nb.bWidth = self.nb.$box.width();
<span style="white-space:pre">        </span>bH = self.nb.bHeight = self.nb.$box.height();
        mW = self.nb.mWidth,
        mH = self.nb.mHeight;
      var sScale = self.nb.nScale = Math.min(bW/mW,bH/mH);
      if( sScale>=1 || isNormal ){
        self.nb.nScale = 1;
        self.nb.left = (bW-mW)/2;
        self.nb.top = (bH-mH)/2;
        self.nb.$img.css({
          'width': mW,
          'height': mH,
          'left': (bW-mW)/2,
          'top': (bH-mH)/2
        })
      }else{
        self.nb.left = (bW-mW*sScale)/2;
        self.nb.top = (bH-mH*sScale)/2;
        self.nb.$img.css({
          'width': mW*sScale,
          'height': mH*sScale,
          'left': (bW-mW*sScale)/2,
          'top': (bH-mH*sScale)/2
        })
      };
      this.setCenter();
    },
    setCenter: function(){
      var self = this;
      this.nb.centerX = self.nb.left + self.nb.mWidth*self.nb.nScale/2;
      this.nb.centerY = self.nb.top + self.nb.mHeight*self.nb.nScale/2;
    },
    //对外提供，改变图片大小
    setScale: function(str,callback){
      var self = this;
      if( str == 'plus'){
        self.nb.nScale += 0.1;
      }else if( str == 'reduce' ){
        self.nb.nScale -= 0.1;
      };
      self.nb.nScale = self.nb.nScale>=10?10:self.nb.nScale;
      self.nb.nScale = self.nb.nScale<=0.1?0.1:self.nb.nScale;
      self.nb.left = self.nb.centerX - self.nb.mWidth*self.nb.nScale/2;
      self.nb.top = self.nb.centerY - self.nb.mHeight*self.nb.nScale/2;
      self.nb.$img.css({
        'width': self.nb.mWidth*self.nb.nScale,
        'height': self.nb.mHeight*self.nb.nScale,
        'left': self.nb.left,
        'top': self.nb.top
      });
      callback && callback();
    },
    //对外提供，获取缩放比例
    getScale: function(){
      return this.nb.nScale;
    },
    imgMouseEvent: function(){
      var self = this;
      var sX,sY,disX,disY,sImgX,sImgY,b;
      self.nb.$img.on('mousedown',function(e){
        b = true;
        sX = e.pageX;
        sY = e.pageY;
        sImgX = self.nb.left;
        sImgY = self.nb.top;
      });
      $(document).on('mousemove',function(e){
        if( !b ) return;
        self.nb.$img.css({
          'left': sImgX + e.pageX - sX,
          'top': sImgY + e.pageY - sY
        });
        return false;
      });
      $(document).on('mouseup',function(){
        b = false;
        self.nb.left = parseInt(self.nb.$img.css('left'));
        self.nb.top = parseInt(self.nb.$img.css('top'));
        self.setCenter();
      });
    }
  };
  HandleImage.prototype = proto;
  window.HandleImage = HandleImage;
})(window,jQuery);

index.js

$(document).ready(function(){
  var $win = $(window),
    $con1 = $('.container1'),
    $main1 = $('.main1'),
    $showImg1 = $('.showImg1'),
    $showImg1_btnLeft = $('.showImg1_btnLeft'),
    $showImg1_btnRight = $('.showImg1_btnRight'),
    $imgBox1 = $('.imgBox1'),
    $img1 = $('.img1'),
    $showImg1_btnLeft = $('.showImg1_btnLeft'),
    $showImg1_btnRight = $('.showImg1_btnRight'),
    $chooseImg1_btnLeft = $('.chooseImg1_btnLeft'),
    $chooseImg1_btnRight = $('.chooseImg1_btnRight'),
    $chooseImg1_box = $('.chooseImg1_box'),
    $scale1 = $('.scale1'),
    $btnImgInit1 = $('.btnImgInit1'),
    $btnImgFullScreen = $('.btnImgFullScreen'), 

    $sider1 = $('.sider1'),
    $imgListBox1 = $('.imgListBox1'),
    $imgList1 = $('.imgList1');
  //container2-fullscreen对象
  var $con2 = $('.container2'),
    $select = $('.select'),
    $btnStart = $('.btnStart'),
    $btnStop = $('.btnStop'),
    $btnExitFullScreen = $('.btnExitFullScreen'),
    $imgBox2 = $('.imgBox2'),
    $img2 = $('.img2'),
    $showImg2_btnLeft = $('.showImg2_btnLeft'),
    $showImg2_btnRight = $('.showImg2_btnRight'),
    $chooseImg2_btnLeft = $('.chooseImg2_btnLeft'),
    $chooseImg2_btnRight = $('.chooseImg2_btnRight'),
    $imgListBox2 = $('.imgListBox2'),
    $imgList2 = $('.imgList2'); 

  var winW = $win.width(),
    winH = $win.height();
  //图片处理事件
  var h1;
  var handle = {
    init1: function(){
      h1 = new HandleImage({
        box: $imgBox1,
        img: $img1
      });
    },
    setImg1: function(src,isNormal){
      h1.setImg(src,isNormal,function(){
        imgListEvent.setScaleText();
      });
    }
  }; 

  //窗口改变事件
  var envFunc = {
    fnSize: function(){
      $(window).on('resize',function(){
        winW = $win.width(),
        winH = $win.height();
        containEvent.setCon();
        containEvent.setShowImg1_height();
        imgListEvent.imgList1_position();
        h1.setBoxWH();
      });
    }
  };
  envFunc.fnSize(); 

  //cantanier事件
  var containEvent = {
    init: function(){
      this.setCon();
      this.setShowImg1_height();
      handle.init1();
    },
    //设置container宽高
    setCon: function(){
      $con1.css({
        'width': winW,
        'height': winH
      });
      $con2.css({
        'width': winW,
        'height': winH
      });
    },
    //设置图片控制区高
    setShowImg1_height: function(){
      $showImg1.css({
        'height': $main1.height() - $chooseImg1_box.height()
      })
    },
    showText: function(data){
      $('.pTroTit1').text(data['src']);
      $('.pTroName1').text(data['title']);
    }
  };
  containEvent.init(); 

  //图片选择 普通的width：70+10, 选中active：80+10
  var $liActive_1;
  var index = 0;
  var imgListEvent = {
    init: function(){
      this.imgList1_add();
      this.imgList1_click();
      this.scaleEvent();
      this.mouseWheelEvent();
      this.fnClick();
    },
    imgList1_add: function(){
      var str = ''
      for( var i=0; i<imgData.length; i++ ){
        var tmp = imgData[i];
        str += '<li style="background-image:url('+ tmp.src +')" ></li>'
      };
      $imgList1.append(str);
      $imgList1.css({
        'width': (70+10)*imgData.length + 10
      });
    },
    imgList1_click: function(){
      var self = this;
      $imgList1.find('li').on('click',function(){
        if( $liActive_1 ) $liActive_1.removeClass('active');
        index = $(this).index();
        $(this).addClass('active');
        $liActive_1 = $(this);
        self.imgList1_position();
        handle.setImg1( imgData[index]['src'] );
        containEvent.showText( imgData[index] );
      });
      $imgList1.find('li').eq(0).trigger('click');
    },
    imgList1_position: function(){
      var boxWidth1 = $imgListBox1.width();
      var le = (boxWidth1/2 - index*80);
      le = Math.floor(le/80)*80;
      le = le>=0?0:le;
      var maxLe = (boxWidth1-$imgList1.width())+10;
      le = le<maxLe?maxLe:le;
      $imgList1.css({
        'left': le
      })
    },
    scaleEvent: function(){
      var timer = null;
      var btnPos = {
        x: null,
        y: null
      };
      var fnCallback = function(){
        imgListEvent.setScaleText();
      };
      $('.scaleAdd1').on('mousedown',function(e){
        h1.setScale('plus',fnCallback);
        checkBtnPos(e);
        timer = setTimeout(function(){
          fnAnimate('plus');
        },500);
      });
      $('.scaleReduce1').on('mousedown',function(e){
        h1.setScale('reduce',fnCallback);
        checkBtnPos(e);
        timer = setTimeout(function(){
          fnAnimate('reduce');
        },500);
      });
      $('.scaleAdd1').add($('.scaleReduce1')).on('mouseup',function(){
        clearInterval(timer);
        return false;
      });
      $('.scaleAdd1').add($('.scaleReduce1')).on('mousemove',function(e){
        if( Math.abs(e.pageX-btnPos.x)>=5 || Math.abs(e.pageY-btnPos.y)>=5 ){
          clearInterval(timer);
        };
        return false;
      });
      function checkBtnPos(e){
        btnPos.x = e.pageX;
        btnPos.y = e.pageY;
      };
      function fnAnimate(str){
        if( str == 'plus' ){
          timer = setInterval(function(){
            h1.setScale('plus',fnCallback);
          },30);
        }else if( str == 'reduce'){
          timer = setInterval(function(){
            h1.setScale('reduce',fnCallback);
          },30)
        };
      };
    },
    mouseWheelEvent: function(){
      var imgBox1 = $imgBox1.get(0);
      if( document.attachEvent ){
        imgBox1.attachEvent('onmousewheel',move)
      };
      if( document.addEventListener ){
        imgBox1.addEventListener('mousewheel',move,false);
        imgBox1.addEventListener('mousewheel',move,false);
      };
      var fnCallback = function(){
        imgListEvent.setScaleText();
      };
      function move(e){
        var up = true;
        if( e.wheelDelta ){
          up = e.wheelDelta > 0 ? true : false;
        };
        if( e.detail ){
          up = e.detail < 0 ? true : false;
        };
        if( up ){
          h1.setScale('plus',fnCallback);
        }else{
          h1.setScale('reduce',fnCallback);
        };
        if( e.preventDefault ){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }
      };
    },
    setScaleText: function(){
      var scale = Math.round(h1.getScale()*100);
      $scale1.text(scale+'%');
    },
    fnClick: function(){
      $showImg1_btnRight.on('click',function(){
        $liActive_1.next().trigger('click');
      });
      $showImg1_btnLeft.on('click',function(){
        $liActive_1.prev().trigger('click');
      });
      $chooseImg1_btnLeft.on('click',function(){
        var w = $imgListBox1.width();
        var le = parseInt($imgList1.css('left')) + w;
        if( le > 0 ) le = 0;
        $imgList1.css({
          'left': le
        })
      });
      $chooseImg1_btnRight.on('click',function(){
        var w = $imgListBox1.width();
        var minLe = w - $imgList1.width();
        var le = parseInt($imgList1.css('left')) - w;
        if( le < minLe ) le = minLe;
        $imgList1.css({
          'left': le
        })
      });
      $btnImgInit1.on('click',function(){
        handle.setImg1( imgData[index]['src'], true );
      });
      $btnImgFullScreen.on('click',function(){
        fullScreen.enterFull();
      });
    }
  };
  imgListEvent.init(); 

  /*
   * container2
   */
  var $liActive_2;
  var timer2;
  function setImg2(src){
    $imgBox2;
    $img2;
    var bW,bH,mW,mH;
    var img = new Image();
    $img2.attr('src',src);
    img.onload = function(){
      mW = img.width;
      mH = img.height;
      bW = $imgBox2.width();
      bH = $imgBox2.height();
      setPosition();
    };
    img.src = src;
    function setPosition(){
      var sScale = Math.min(bW/mW,bH/mH);
      if( sScale>=1 ){
        $img2.css({
          'width': mW,
          'height': mH,
          'left': (bW-mW)/2,
          'top': (bH-mH)/2
        });
      }else{
        $img2.css({
          'width': mW*sScale,
          'height': mH*sScale,
          'left': (bW-mW*sScale)/2,
          'top': (bH-mH*sScale)/2
        });
      };
    };
  };
  var fullScreen = {
    init: function(){
      this.addImg();
      this.addClick();
    },
    addImg: function(){
      var str = ''
      for( var i=0; i<imgData.length; i++ ){
        var tmp = imgData[i];
        str += '<li style="background-image:url('+ tmp.src +')" ></li>'
      };
      $imgList2.append(str);
      $imgList2.css({
        'width': 115*imgData.length
      });
    },
    addClick: function(){
      var self = this;
      $imgList2.find('li').on('click',function(){
        if( $liActive_2 ) $liActive_2.removeClass('active');
        index = $(this).index();
        $(this).addClass('active');
        $liActive_2 = $(this);
        self.imgList2_position();
        setImg2( imgData[index]['src'] );
      });
      $showImg2_btnRight.on('click',function(){
        $liActive_2.next().trigger('click');
      });
      $showImg2_btnLeft.on('click',function(){
        $liActive_2.prev().trigger('click');
      });
      $chooseImg2_btnLeft.on('click',function(){
        var w = $imgListBox2.width();
        var le = parseInt($imgList2.css('left')) + w;
        if( le > 0 ) le = 0;
        $imgList2.css({
          'left': le
        })
      });
      $chooseImg2_btnRight.on('click',function(){
        var w = $imgListBox2.width();
        var minLe = w - $imgList2.width();
        var le = parseInt($imgList2.css('left')) - w;
        if( le < minLe ) le = minLe;
        $imgList2.css({
          'left': le
        })
      });
      $btnExitFullScreen.on('click',function(){
        self.exitFull();
      });
    },
    imgList2_position: function(){
      var boxWidth2 = $imgListBox2.width();
      var le = (boxWidth2/2 - index*115);
      le = Math.floor(le/115)*115;
      le = le>=0?0:le;
      var maxLe = (boxWidth2-$imgList2.width());
      le = le<maxLe?maxLe:le;
      $imgList2.css({
        'left': le
      });
    },
    enterFull: function(){
      var self = this;
      enterFullscreen();
      $con1.css('opacity','0');
      $con2.show();
      setTimeout(function(){
        $imgList2.find('li').eq(index).trigger('click');
      },500);
      //esc keyCode:27
      $(document).on('keyup.a',function(e){
        if( e.keyCode == 27 ){
          self.exitFull();
        };
      });
    },
    exitFull: function(){
      clearInterval(timer2);
      $(document).off('keyup.a');
      $con1.css('opacity','1');
      $con2.hide();
      animateEvent.showStart();
      setTimeout(function(){
<span style="white-space:pre">        </span>$imgList1.find('li').eq(index).trigger('click');
<span style="white-space:pre">      </span>},500);
      exitFullscreen();
    }
  };
  fullScreen.init();
// fullScreen.enterFull(); 

  //定时器
  var animateEvent = {
    init: function(){
      var self = this;
      $btnStart.on('click',function(){
        self.start();
      });
      $btnStop.on('click',function(){
        self.stop();
      });
      $select.on('change',function(){
        self.start();
      });
    },
    start: function(){
      this.showStop();
      var intervalTime = parseInt($select.val())*1000;
      clearInterval(timer2);
      timer2 = setInterval(function(){
        $liActive_2.next().trigger('click');
      },intervalTime);
    },
    stop: function(){
      clearInterval(timer2);
      this.showStart();
    },
    showStart: function(){
      clearInterval(timer2);
      $select.show().val('2');
      $select.hide();
      $btnStop.hide();
      $btnStart.show();
    },
    showStop: function(){
      $btnStart.hide();
      $btnStop.show();
      $select.show();
    }
  };
  animateEvent.init(); 

  /*
   * 全屏事件
   */
  // 判断各种浏览器
  function enterFullscreen() {
    var element = document.documentElement;
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  // 判断浏览器种类
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
});

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js图片浏览效果
js仿百度图片浏览
uc浏览器javascript、浏览器启用javascript、谷歌浏览器javascript、浏览器禁用javascript、浏览器javascript，以便于您获取更多的相关知识。

时间： 2024-11-27 09:14:05

JavaScript仿百度图片浏览效果_javascript技巧的相关文章

tuzhu_req.js 实现仿百度图片首页效果_jquery

tuzhu_req.js 处理文件请求加载异步同步功能,仿效百度图片首页效果制作 /*土著人开发的require组件 @土著人 (http://www.tuzhuren.com)*/ ! function() { function e() {} Function.prototype.bind || (Function.prototype.bind = function(t) { var n = this; if ("function" != typeof n) throw new Ty

用javascript实现的仿Flash广告图片轮换效果_javascript技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

基于javascript实现图片切换效果_javascript技巧

本文实例为大家分享了js实现图片切换效果,供大家参考,具体内容如下 用js实现点击按钮,图片切换的效果: <div class="box" id="box"> <div class="img_box" id="img_box"> <img src="../raw/b1.jpg" class="image" > <img src="../

JavaScript仿静态分页实现方法_javascript技巧

本文实例讲述了JavaScript仿静态分页实现方法.分享给大家供大家参考.具体如下: 这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE> 静态分页</TITLE> <style> * {

JS实现超简单的仿QQ折叠菜单效果_javascript技巧

本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

JavaScript实现多栏目切换效果_javascript技巧

在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法: <style> .news_wrap{ width: 380px; height: 266px; float: left; margin-left: 15px; } .news_head{ width: 380px; border-bottom: 2px solid #dedede; height: 51px; line-height: 51px; } .tabList ul li{

基于Javascript实现二级联动菜单效果_javascript技巧

本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下 效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]

JS+DIV+CSS实现仿表单下拉列表效果_javascript技巧

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE

JavaScript html5 canvas绘制时钟效果_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下:  HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.