javascript放大镜功能

最新推荐文章于 2023-03-31 13:39:30 发布

出来打酱油

最新推荐文章于 2023-03-31 13:39:30 发布

阅读量527

点赞数

分类专栏： JavaScript 文章标签： javascript function div class

本文链接：https://blog.csdn.net/tengyang11/article/details/6639997

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

先把原理说一下：首先是两张内容相同的图片a和b，图片a作为原图，图片b作为放大的效果图。

当鼠标在图片a上经过时，按照固定大小截取图片b显示出来。截取的方法很简单，用style的left和top属性就好了。

<html>

<head>
<style type="text/css">
   .zoomPan{width:800px;left:100px;position:relative; }
   .sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}
   #zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}
   #zoom img{position:relative;}
</style>
</head>
<body>
   <div class="zoomPan" id="zoomPan">
       <img id="productimage" src="http_imgload.jpg" alt="" />
       <div id="zoom" class="sh">
           <img id="zoomimg" src="http_imgload.jpg" alt="" />
       </div>
   </div>


</body>
<script type="text/javascript">
   function zoomBox() {this.index.apply(this, arguments)}
   zoomBox.prototype = {
       index: function(win,zoom) {
           var win=document.getElementById(win);
           var box=document.getElementById(zoom);
           var img=box.getElementsByTagName('IMG')[0];
           var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
           //var z=Math.round(box.offsetWidth/2);
           win.οnmοusemοve=function (e){
               e = e || window.event;
               var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
               if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
               x-=ori.left;
               y-=ori.top;
               box.style.left=x+'px';
               box.style.top=y+'px';
               img.style.left=-x*zoom+'px';
               img.style.top=-y*zoom+'px';
           }
           win.οnmοuseοver=function (){box.style.display=''}
       }
   };
   window.οnlοad=function (){
       document.getElementById("zoomimg").style.width = document.getElementById("productimage").clientWidth * 1.2 + 'px';
       document.getElementById("zoomimg").style.height = document.getElementById("productimage").clientHeight * 1.2 + 'px';
       x=new zoomBox('zoomPan','zoom')
   }
</script>
</html>

出来打酱油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript放大镜功能

先把原理说一下：首先是两张内容相同的图片a和b，图片a作为原图，图片b作为放大的效果图。当鼠标在图片a上经过时，按照固定大小截取图片b显示出来。截取的方法很简单，用style的left和top属性就好了。 .zoomPan{width:800px;left:100px;po
复制链接

扫一扫

专栏目录