官网首页淡出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,h2,p{ margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
#box{width:266px;padding:10px 24px 20px;background:#EACFCF;overflow:hidden;margin:20px auto 0;}
.left{width:266px;float:left;}
#box h2{height:38px;border-bottom:1px solid #D2A1A1;background:url(img/H2_Bg.png) no-repeat 0 10px;padding-left:20px;}
#box h2 strong{float:left; line-height:38px;color:#885050;font-weight:normal;}
#box h2 a{float:right;width:52px;height:14px;background:url(img/a_bg.png) no-repeat;font-size:12px;text-indent:10px;color:#fff;line-height:12px;font-weight:normal;margin-top:10px;}
#box li{height:30px;position:relative;border-bottom:1px dashed #D1A1A1;}
#box li div,#box li p{height:30px;position:absolute;top:0;left:0;width:100%;}
#box li p{background:#fff;opacity:0;filter:alpha(opacity=0);}
#box li div a,#box li div span{line-height:30px;font-size:12px;height:30px;}
#box li div a {float:left;background:url(img/li_bg.gif) 8px 12px no-repeat;padding-left:20px;color:#7F5454;width:172px;overflow:hidden;}
#box li div span{padding-right:10px;float:right;color:#CF9494;}
</style>
<script src=js/animate.js></script>
</head>
<body>
<div id="box">
<div class="left">
<ul>
<li>
<p></p>
<div>
<a target="_blank" href="#">亲爱的，我们现在就回家</a>
</div>
</li>
<li>
<p></p>
<div>
<a target="_blank" href="#">葡萄都爬到架上了</a>
</div>
</li>
<li>
<p></p>
<div>
<a target="_blank" href="#">眼看着，夏天就要到来</a>
</div>
</li>
<li>
<p></p>
<div>
<a target="_blank" href="#">到它的忍冬花脚下，到你的卧室里</a>
</div>
</li>
<li>
<p></p>
<div>
<a target="_blank" href="#">我们流浪的亲吻已走遍了世界</a>
</div>
</li>
<li>
<p></p>
<div>
<a target="_blank" href="#">亚美尼亚，出土的蜜块</a>
</div>
</li>
<li>
<p></p>
<div>
<a target="_blank" href="#">锡兰，绿鸽子;扬子江以它悠久的</a>
</div>
</li>
</ul>
</div>
</div>
<script src=js/main.js></script>
</body>
</html>
引用的animate.js:
// Element.prototype.animate=animate;
Element.prototype.getStyle = getStyle;
function animate(obj, json, callback) {
//var flags=false;
clearInterval(obj.timer);
for (var attr in json) {
//var that = this;
var icur = 0, speed = 0;
obj.timer = setInterval(function () {
if (attr == 'opacity') {
icur = Math.round(parseFloat(obj.getStyle()[attr]) * 100);
} else {
icur = parseInt(obj.getStyle()[attr]);
}
speed = (parseInt(json[attr]) - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + icur + speed + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + "px";
};
if (icur == parseInt(json[attr])) {
//flags=true;
clearInterval(obj.timer);
if (callback) {
callback();
}
}
}, 20);
}
}
function getStyle() {
if (this.currentStyle) {
return this.currentStyle;
} else {
return document.defaultView.getComputedStyle(this, null);
}
}
main.js:
var left=document.getElementsByClassName("left")[0];
var ul=left.getElementsByTagName("ul")[0];
var lis=ul.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
var p=this.getElementsByTagName("p")[0];
clearInterval(p.timer);//移入时关闭定时器
p.style.opacity=100;
}
lis[i].onmouseout=function(){
var p=this.getElementsByTagName("p")[0];
animate(p,{"opacity":"0"});
}
}
