首页 > 代码库 > 官网首页淡出效果

官网首页淡出效果

<!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=http://www.mamicode.com/js/animate.js></script>"box">
            <div class="left">
                <ul>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">亲爱的,我们现在就回家</a>
                        </div>
                    </li>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">葡萄都爬到架上了</a>
                        </div>
                    </li>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">眼看着,夏天就要到来</a>
                        </div>
                    </li>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">到它的忍冬花脚下,到你的卧室里</a>
                        </div>
                    </li>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">我们流浪的亲吻已走遍了世界</a>
                        </div>
                    </li>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">亚美尼亚,出土的蜜块</a>
                        </div>
                    </li>
                    <li>
                        <p></p>
                        <div>
                            <a target="_blank" href="http://www.mamicode.com/#">锡兰,绿鸽子;扬子江以它悠久的</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <script src=http://www.mamicode.com/js/main.js></script>>

  引用的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"});
    }
}

  

官网首页淡出效果