官网首页淡出效果
<!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"}); } }