通过层DIV实现，当鼠标放在链接上面，显示图片及文字
层的位置是可改变、大小是可改变的、可见是可调的，这个就可以用于实现一些特殊的效果，如隐显、渐显等，
下面是一个鼠标事件的层操作，当鼠标放在上面的时候可以显示定位显示隐藏的层：
- <HTML>
- <body>
- 示例展示一：
- <a href="www.sina.com" id="i" onmouseover="show(this,'m')" onmouseout="hide('m')">鼠标放在上面显示图片查看有边框的层</a>
- <div id="m" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute" onmouseover="show(i,'m')" onmouseout="hide('m')">
- <nobr>注：这个层是加了边框的</nobr><br>
- <img src="http://images.163.com/homepage/logo.gif"></img><br>
- <a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
- <a href="http://www.163.com">网易</a>
- </div>
- 示例展示二：
- <a href="www.sina.com" id="i1" onmouseover="show(this,'m1')" onmouseout="hide('m1')">鼠标放在上面显示图片查看没有边框的层</a>
- <div id="m1" style="VISIBILITY:hidden;POSITION:absolute;background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/xport/155656/o_Java.gif);" onmouseover="show(i1,'m1')" onmouseout="hide('m1')">
- 注：这个层没有边框但加了背景，写法就简单一点<br>
- <img src="http://images.163.com/homepage/logo.gif"></img><br>
- <a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
- <a href="http://www.163.com"><nobr>网易</nobr></a>
- </div>
- <script>
- //显示
- function show(o,obj){
- var m=document.getElementById(obj);
- m.style.pixelLeft=getL(o);
- m.style.pixelTop=getT(o)+o.offsetHeight;
- m.style.visibility='';
- }
- //隐藏
- function hide(obj){
- document.getElementById(obj).style.visibility='hidden';
- }
- //取得左边的位移
- function getL(e){
- var l=e.offsetLeft;
- while(ee=e.offsetParent){
- l+=e.offsetLeft;
- }
- return l;
- }
- //取得顶部的位移
- function getT(e){
- var t=e.offsetTop;
- while(ee=e.offsetParent){
- t+=e.offsetTop;
- }
- return t;
- }
- </script>
- </body>
- </HTML>
3368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
