鼠标经过放大图像，JS浮动层放大图像

发布时间：2018-08-21 18:37:46 所属栏目：Asp教程来源：站长网

导读：鼠标经过图像后弹出一个浮动层然后放大该图像，基于 Java Script的一个实现。需要事先准备好被放大的图片和缩略图，程序加载完图像后才能看到效果，这也是一个不完美的地方，仅供参考学习。演示： htmlheadtitle鼠标经过弹出浮动层，放大图像/titlescript

　　鼠标经过图像后弹出一个浮动层然后放大该图像，基于JavaScript的一个实现。需要事先准备好被放大的图片和缩略图，程序加载完图像后才能看到效果，这也是一个不完美的地方，仅供参考学习。

　　演示：

<html> <head> <title>鼠标经过弹出浮动层，放大图像</title> <script type="text/javascript"> function picshow() { var a=document.getElementById("m") a.style.visibility='visible' a.style.top=event.clientY a.style.left=event.clientX } function picmove() { var b=document.getElementById("m") b.style.top=event.clientY b.style.left=event.clientX } function pichide() { var c=document.getElementById("m") c.style.visibility='hidden' } function trfunc() { var d=document.getElementsByTagName("tr") var len=d.length; d[1].attachEvent("onmouseover",picshow); d[1].attachEvent("onmousemove",picmove); d[1].attachEvent("onmouseout",pichide); } </script> </head> <body onload="trfunc()"> <div id=m style="position:absolute;top:0;left:0;visibility:hidden;padding:3px;border:1px solid #528AC6;background-color:#ffdfd0;" >//隐藏层 <img src="/uploads/common/images/p5.jpg" width="400" height="300"> </div> <table border=1> <tr> <td>test</td> </tr> <tr>//获取鼠标onmouseon <td colspan=4><img src="/uploads/common/images/s_p5.jpg" width="80" height="80"></td> </tr> </table> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：鹤壁站长网）

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