JavaScript鼠標劃過背景拖尾效果_文本鏈接特效

JavaScript拖尾效果，當鼠標連續劃過多個單元格的時候，單元格的背景會依次變幻顏色，形成“拖尾”的效果，你可以將其更改為一個導航菜單，效果肯定也不錯。

<html>
<head>
<title>JavaScript鼠標劃過殘影效果</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#000;
}
.container a{
display:inline-block;
float:left;
background-color:#999999;
margin-right:1px;
margin-top:1px;
width:28px;
text-align:center;
padding:4px 0px;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
cursor:pointer;
}
.caption{
margin:0px auto;
width:202px;
height:auto;
overflow:hidden;
padding:1px;
background-color:#CCCCCC;
}
.caption h2{
margin:0px;
padding:3px;
text-align:center;
font-size:12px;
background-color:#666666;
}
.caption ul{
margin:0px;
padding:0px 6px;
list-style:none;
line-height:22px;
font-size:12px;
}
</style>
<script language="javascript" type="text/javascript">
var shadow_delay=function(){
var delay_time=200;  //殘影時間
var a=document.getElementsByTagName("a");
var color=new Array("#ea991f","#cc994b","#ae9979","#999999");
for(var i=7;i<a.length-2;i++){
a[i].onclick=function(){if(!this.i){this.style.color="#ff0000";this.style.backgroundColor="#FF9900"}else{this.style.color="#FFFFFF";this.style.backgroundColor="#999999"};this.i=!this.i;}
a[i].onfocus=function(){this.blur()}
a[i].onmouseover=function(){this.style.backgroundColor="#FF9900"}
a[i].onmouseout=function(){var obj=this;var j=0;function dc(){if(j<color.length){setTimeout(dc,delay_time);obj.style.backgroundColor=color[j];j++}else{if(obj.i){obj.style.backgroundColor="#FF9900"}}};dc()};
}
}
window.onload=shadow_delay;
</script>
</head>

所屬頻道：文本鏈接特效/更新時間：2012-12-01

[收藏][報錯][返回列表]

相關文本鏈接特效：

JavaScript鼠標劃過背景拖尾效果_文本鏈接特效

文本鏈接特效Rss訂閱特效代碼搜索

文本鏈接特效推薦

猜你也喜歡看這些