您的位置：首页 > 其它

（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字

2013-05-24 15:46 585 查看
（源码实例）通过层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(http://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(e=e.offsetParent){

l+=e.offsetLeft;

}

return l;

}

//取得顶部的位移

function getT(e){

var t=e.offsetTop;

while(e=e.offsetParent){

t+=e.offsetTop;

}

return t;

}

</script>

</body>

</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航