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订阅特效代码搜索

文本链接特效推荐

猜你也喜欢看这些