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

发布时间：2018-08-19 08:51:43 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys