给链接加上动态注释

2012-03-23 22:54:34 | 【大中小】

把鼠标移动到链接上
欢迎光临分享JavaScript

我们的家园：http://www.sharejs.com

把鼠标放到链接上，会出现一个动画的注释条，可以用来实现一些特殊效果

第一步：

在<head>区添加样式定义

<STYLE type="text/css">
<!--
.article { 
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; 
FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden 
; background-color: #FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px} 
-->
</STYLE>

第二步：
在<head>区添加JavaScript函数定义

<SCRIPT language=JavaScript1.2> 
        
        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
            
<!-- 
function Show(divid) { 
divid.filters.revealTrans.apply(); 
divid.style.visibility = "visible"; 
divid.filters.revealTrans.play(); 
} 
function Hide(divid) { 
divid.filters.revealTrans.apply(); 
divid.style.visibility = "hidden"; 
divid.filters.revealTrans.play(); 
} 
//-->
</script>

第三步：
给链接加上鼠标事件和注释条

<a href="http://www.sharejs.com" onMouseOver=Show(aaa) onMouseOut=Hide(aaa)>欢迎光临分享JavaScript</a></div>
<div id="aaa" class="article">我们的家园：http://www.sharejs.com</div>

给链接加上动态注释

下载"给链接加上动态注释"

相关资源