JS放大镜，移动放大镜，JavaScript图片放大代码

发布时间：2018-08-20 15:48:47 所属栏目：Asp教程来源：站长网

导读：JS放大镜, Java Script图片放大代码，JavaScript妙味课堂的一个作品，通过查看效果我们就可以了解到这样的效果不是一般水平可以实现的！的确，这是来自妙味课堂的一个小作品，具体效果大家自己看吧。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 T

　　JS放大镜,JavaScript图片放大代码，JavaScript妙味课堂的一个作品，通过查看效果我们就可以了解到这样的效果不是一般水平可以实现的！的确，这是来自妙味课堂的一个小作品，具体效果大家自己看吧。

　　演示：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>放大镜</title> <style type="text/css"> #div1 { width: 190px; height: 143px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic { width: 190px; height: 143px; background: #eee; position: relative; } #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } </style> <script type="text/javascript"> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aTmp=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aTmp.push(aEle[i]); } } return aTmp; } window.onload=function () { var oDiv=document.getElementById('div1'); var oMark=getByClass(oDiv, 'mark')[0]; var oFloat=getByClass(oDiv, 'float_layer')[0]; var oBig=getByClass(oDiv, 'big_pic')[0]; var oSmall=getByClass(oDiv, 'small_pic')[0]; var oImg=oBig.getElementsByTagName('img')[0]; oMark.onmouseover=function () { oFloat.style.display='block'; oBig.style.display='block'; }; oMark.onmouseout=function () { oFloat.style.display='none'; oBig.style.display='none'; }; oMark.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; if(l<0) { l=0; } else if(l>oMark.offsetWidth-oFloat.offsetWidth) { l=oMark.offsetWidth-oFloat.offsetWidth; } if(t<0) { t=0; } else if(t>oMark.offsetHeight-oFloat.offsetHeight) { t=oMark.offsetHeight-oFloat.offsetHeight; } oFloat.style.left=l+'px'; oFloat.style.top=t+'px'; var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth); var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight); oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; }; }; </script> </head> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src="http://www.veryhuo.com/uploads/common/images/s_p6.jpg" /></div> <div class="big_pic"><img src="http://www.veryhuo.com/uploads/common/images/p6.jpg" /></div> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：91站长网）

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