鼠标颠末放大图像，JS浮动层放大图像

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

导读：鼠标颠末图像后弹出一个浮动层然后放大该图像，基于 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

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