jQuery實現(xiàn)的放大鏡效果示例

2019-11-20 09:01:19

字體：大中小

來源：轉載

供稿：網(wǎng)友

本文實例講述了jQuery實現(xiàn)的放大鏡效果。分享給大家供大家參考，具體如下：

zoom.css：

*{  padding: 0;  margin: 0;}li{  list-style-type: none;}.zoom{  margin: 50px;  position: relative;}.zoomMiddle{  border: 1px solid #ccc;  width: 300px;  height: 300px;  margin-bottom: 3px;  position: relative;}.zoomMiddle img{  width: 300px;  height: 300px;}.mask{  width: 100px;  height: 100px;  background: #abcdef;  opacity:0.4;  position: absolute;  left: 0;  top: 0;  display: none;}.zoomSmall{  -overflow: hidden;  width: 302px;  height: 54px;}.zoomSmall span{  float: left;  height: 52px;  line-height: 52px;  width: 10px;  text-align: center;  border: 1px solid #ccc;  cursor: pointer;}.zoomSmall span.disable{  cursor: default;  background: #ccc;}.wrapSmallImg{  float: left;  height: 54px;  width: 232px;  /*background: #f00;*/  position: relative;  overflow: hidden;}.wrapSmallImg ul{  width: 348px;  /*background: #f00;*/  position: absolute;  left: 0;  top: 0;}.wrapSmallImg ul li{  float: left;  width: 50px;  height: 50px;  border: 2px solid #ccc;  margin: 0 2px;  _display: inline;  cursor: pointer;}.wrapSmallImg ul li.current{  border: 2px solid orange;}.wrapSmallImg ul li img{  width: 50px;  height: 50px;}.zoomLarge{  width: 350px;  height: 350px;  border: 1px solid #ccc;  position: absolute;  top: 0;  left: 320px;  overflow: hidden;  display:none;}.zoomLarge img{  width: 600px;  height:600px;  position: absolute;  left: 0;  top: 0;}

zoom.html：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>放大鏡</title><link rel="stylesheet" href="zoom.css"></head><body><input type="text" name="" id=""><div class="zoom">  <div class="zoomMiddle">    <img src="1.jpg" alt="">    <div class="mask"></div>  </div>  <div class="zoomSmall">    <span class="left disable"><</span>    <div class="wrapSmallImg">      <ul>        <li class="current"><img src="1.jpg" alt=""></li>        <li><img src="2.jpg" alt=""></li>        <li><img src="3.jpg" alt=""></li>        <li><img src="4.jpg" alt=""></li>        <li><img src="5.jpg" alt=""></li>        <li><img src="6.jpg" alt=""></li>      </ul>    </div>    <span class="right">></span>  </div>  <div class="zoomLarge"><img src="1.jpg" alt=""></div></div><script src="jquery.js"></script><script src="zoom.js"></script></body></html>

zoom.js：

$(function(){  var smallImgLi = $('.wrapSmallImg ul li');  var smallImgLiLength = smallImgLi.size();  var smallImgLiWidth = smallImgLi.outerWidth(true);  var smallImgUl = $('.wrapSmallImg ul');  var leftBtn = $('span.left');  var rightBtn = $('span.right');  var now = 0;  var zoomMiddleDiv = $('.zoomMiddle');  smallImgLi.mouseover(function(){    $(this).addClass('current').siblings().removeClass('current');    var thisSrc = $(this).children('img').attr('src');    $('.zoomMiddle img').attr('src',thisSrc);    $('.zoomLarge img').attr('src',thisSrc);  });  rightBtn.click(function(){    //當now=2的時候，我們不希望再讓他滾動了    leftBtn.removeClass('disable');    if(now>=smallImgLiLength-4){      $(this).addClass('disable');      now = smallImgLiLength-4;    }else{      now++;      smallImgUl.animate({'left':-now*smallImgLiWidth},300);    }  });  leftBtn.click(function(){    if(now==0){      now=0;    }else{      now--;      smallImgUl.animate({'left':'+='+smallImgLiWidth},300);    }  });  zoomMiddleDiv.mousemove(function(e){    $('.mask').show();    $('.zoomLarge').show();    zoomMiddleDivOffset = zoomMiddleDiv.offset();    var x = e.pageX - zoomMiddleDivOffset.left - $('.mask').width()/2;    var y = e.pageY - zoomMiddleDivOffset.top - $('.mask').height()/2;    if(x<=0){      x=0;    }else if(x>=zoomMiddleDiv.width()-$('.mask').width()){      x = zoomMiddleDiv.width()-$('.mask').width();    }    if(y<=0){      y=0;    }else if(y>=zoomMiddleDiv.height()-$('.mask').height()){      y = zoomMiddleDiv.height()-$('.mask').height();    }    var percentageX = x/(zoomMiddleDiv.width()-$('.mask').width());    var percentageY = y/(zoomMiddleDiv.height()-$('.mask').height());    $('.zoomLarge img').css({      left:-percentageX*(600-$('.zoomLarge').width()),      top:-percentageY*(600-$('.zoomLarge').height())    });    $('input').val(percentageX+','+percentageY)    $('.mask').css({      'left':x+'px',      'top':y+'px'    });  });  zoomMiddleDiv.mouseout(function(){    $('.mask').hide();    $('.zoomLarge').hide();  });});

效果圖如下：