jquery实现放大镜简洁代码(推荐)

2019-11-19 16:23:55

字体：大中小

来源：转载

供稿：网友

简介

网上有许多放大镜的jquery的插件，但是用着不是那么得心应手，现在一页代码实现一个放大镜功能，如果需要附加的功能可以手动修改，原理都在注释里

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>放大镜效果</title>  <style type="text/css">    * {      margin: 0;      padding: 0;    }    .small {      margin-left:40px;      margin-top:50px;      width: 150px;      height: 150px;      /*border: 2px solid yellow;*/    }     .small>img {      width: 150px;      height: 150px;    }     .slider {      width: 50px;      height: 50px;      background: rgba(180,180,135,0.3);      position: absolute;      display: none;    }    #big {      //设置为固定大小;      width: 200px;      height: 200px;      position: absolute;      /* border: 2px solid red;*/      overflow: hidden;      display: none;    }  </style></head><body><!--缩略图--><div class="small">  <img src="thumb.jpg" />  <!--放大镜,在原图不上的小块-->  <div class="slider"></div></div><!--放大镜区域，大图，设置为none隐藏--><div id="big">  <img id="bigImg" src="big.jpg" /></div>even.clientX<input type="text" value="0" id="test" /><br/>even.clientY<input type="text" value="0" id="test1" /><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">  var small = $(".small")[0];  var slider = $(".slider")[0];  var big = document.getElementById("big");//试一试js获取  var bigImg = document.getElementById("bigImg");//让slider跟随鼠标移动.给小的方块绑定事件  $(".small").mousemove(function(e) {    var even = e || event; //兼容火狐浏览器    var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;    var y = even.clientY - small.offsetTop - slider.offsetHeight/2;//测试even.clientX和even.clientY    $("#test").val(even.clientX);    $("#test1").val(even.clientY);//水平方向的最大值    var maxX = small.clientWidth - slider.clientWidth;//竖直方向的最大值    var maxY = small.clientHeight - slider.clientHeight;    if(x<0){//相当于超出左侧,超出左侧时,拉回      x=0;    }//超出右侧时拉回    if(x>maxX){      x = maxX;    }//顶部超出    if(y<0){      y=0;    }//底部超出    if(y>maxY){      y = maxY;    }    slider.style.top = (y+small.offsetTop) + "px";    slider.style.left = (x+small.offsetLeft) + "px";//放大的图片的主要实现代码:比例计算, big.scrollLeft是id=big的div中下方滚轴的位置//由于id=big的div设置成固定大小，而图片又非常大，所以这个div就像个放大镜一样在大图上晃//比例计算很简单，鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比，现在未知数是大图鼠标的位置    big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ;    big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ;  });//鼠标移入事件  $(".small").mouseenter(function(){//鼠标移入到缩略图时候实现,上面出现的小的方块    $(".slider").css("display","block");    $("#big").css("top",small.offsetTop+"px");//隐藏的大图=获取左图的左边位置+宽度+10(隔开点缝隙与缩略图)+px    big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px";//右侧的大图区域显示出来图片    $("#big").css("display","block");  });//移除事件//添加鼠标移出事件,鼠标移出缩略图的时候  $(".small").mouseleave(function(){    $(".slider").css("display","none");    $("#big").css("display","none");  }); </script></body></html>

下载demo

https://github.com/mytheshow/...

链接： http://pan.baidu.com/s/1nvMBgb3

以上所述是小编给大家介绍的jquery实现放大镜简洁代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：微信小程序开发之toast提示插件使用示例

下一篇：原生JS发送异步数据请求