关闭

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

标签: divfunction网易bloghtmlurl
9165人阅读 评论(0) 收藏 举报
分类:

(源码实例)通过层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>  

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6815847次
    • 积分:60459
    • 等级:
    • 排名:第43名
    • 原创:462篇
    • 转载:209篇
    • 译文:28篇
    • 评论:1747条
    最新评论