爱站程序员基地基于jQuery
实现一个放大镜功能
HTML代码
<body><div id=\"small\"><img src=\"http://cms-bucket.nosdn.127.net/2018/11/28/5915fc732a2747ecb5132a9376b65c2c.jpg\"><div id=\"mark\"></div></div><div id=\"big\"><img src=\"http://cms-bucket.nosdn.127.net/2018/11/28/5915fc732a2747ecb5132a9376b65c2c.jpg\"></div></body>·
CSS代码
<style>#small{width: 240px;height: 350px;border:1px solid rgb(0,0,0);position: absolute;left: 100px;}#small img{width: 100%;height: 100%;}#big img{width: 480px;height: 700px;position:absolute;}#big{display: none;overflow: hidden;width: 200px;height: 200px;border:1px solid rgb(0,0,0);position: absolute;left: 400px;}#mark{display: none;width: 100px;height: 100px;background-color: rgb(255,255,255);opacity: 0.6;filter: alpha(opacity=50);position: absolute;left: 0px;top: 0px;}</style>
filter: alpha(opacity=50)设置透明度
这个filter过滤器是IE专用的，建议不要用，如果想做透明可以用JS来解决。
filter:alpha(opacity=50)是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写。
JS代码
<script >$(function(){$(\"#small\").mouseenter(function(){$(\"#mark,#big\").show()}).mouseleave(function(){$(\"#mark,#big\").hide()}).mousemove(function(ev){//ev是鼠标指向坐标var l=ev.pageX - $(this).offset().left-50;var t=ev.pageY - $(this).offset().top-50;//设置限制if(l<=0){l=0;}if(l>=140){l=140;}if (t<=0) {t=0;}if (t>=250) {t=250;}//改变遮罩层的位置$(\"#mark\").css({left:l,top:t})//同时改变放大图片的位置，两倍于遮罩层位置，注意反方向$(\"#big img\").css({left:-2*l,top:-2*t})})})</script>
（1） if 判断语句是设置限制，不让遮挡罩溢出照片。
（2） offset() 方法返回或设置匹配元素相对于文档的偏移
（位置）。具体用法参考文档: offset（）.
