海阔凭鱼跃,天高任鸟飞!

天高任鸟飞

       

CSS&Javascript特效

作者:     目录: CSS+HTML & PHP+MySQL & 酷站赏析     发表: 2009年11月24日

利用CSS和Javascript实现网页内嵌信息响应鼠标事件,当鼠标滑过网页中某个给定的区域时,就会调用Javascript ,实现内嵌信息的显示与隐藏。

其实实现此特效的代码很简单,原理就是利用Javascript控制XHTML元素的现实与隐藏,下面列出其代码,供参考。
Javascript 代码


<script language="javascript">
function showLayer(layerName, shadowLayerName) 
{ 
   if (document.getElementById) // Netscape 6 and IE 5+ 
   { 
       var targetElement = document.getElementById(layerName); 
       targetElement.style.visibility = 'visible'; 
  } 
} 
 
function hideLayer(layerName) 
{ 
   if (document.getElementById) 
  { 
       var targetElement = document.getElementById(layerName); 
      targetElement.style.visibility = 'hidden'; 
   } 
} 

</script>

XHTML代码


<div id="hover" onmouseover="showLayer('image')" onmouseout="hideLayer('image')">
鼠标移动到这里就可以显示任鸟飞网页设计网的站标
</div> 
<div id="image" style="visibility: hidden;"> 
   <img src="http://renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" alt="image">
</div>

预览此效果:css-javascript-inline-informational-overlays-code

标签:

发表评论