js图片放大镜效果清晰的放大图像

发布时间：2018-10-06 13:03:32 所属栏目：Asp教程来源：站长网

导读：js图片放大镜效果清晰的放大图像超逼真的JS图片放大镜，效果的确不错，其实是载入了两张一样的图片，只不过被放大的图片像素是小的，在鼠标重载后加载大像素的图片，JS与CSS的配合还原鼠标点很不错，值得参考。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML

　　js图片放大镜效果清晰的放大图像

　　超逼真的JS图片放大镜，效果的确不错，其实是载入了两张一样的图片，只不过被放大的图片像素是小的，在鼠标重载后加载大像素的图片，JS与CSS的配合还原鼠标点很不错，值得参考。

<!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> <title>超逼真的JS图片放大镜 - Liehuo.Net</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> .zoomPan{width:570px;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;} h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;} h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;} </style> </head> <body> <h1>zoom</h1> <div class="zoomPan" id="zoomPan"> <img src="http://www.veryhuo.com.net/uploads/allimg/1008/s.jpg" alt="" /> <div id="zoom" class="sh"><img src="http://www.veryhuo.com.net/uploads/allimg/1008/b.jpg" alt="" /></div> </div> <h4>code.js.cn</h4> </body> <script type="text/javascript"> //<![CDATA[ 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.onmousemove=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-z+'px'; box.style.top=y-z+'px'; img.style.left=-x*zoom+z+'px'; img.style.top=-y*zoom+z+'px'; } win.onmouseover=function (){box.style.display=''} } }; window.onload=function (){ x=new zoomBox('zoomPan','zoom') } //]]> </script> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

js图片放大镜效果 清晰的放大图像

js图片放大镜效果清晰的放大图像