百叶窗效果实现原理 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
*{margin: 0;padding: 0;}
li{list-style: none;}
ul{width: 200px;}
li{height: 20px;overflow: hidden;border:1px solid silver;position: relative;}
p{line-height: 20px;position: absolute;}
p:last-child{bottom:-20px;}
        </style>
    </head>
    <body>
        <ul id="list">
            <li>
                <p>11111111111</p>
                <p>22222222222</p>
            </li>
            <li>
                <p>33333333333</p>
                <p>44444444444</p>
            </li>
            <li>
                <p>55555555555</p>
                <p>66666666666</p>
            </li>
            <li>
                <p>77777777777</p>
                <p>88888888888</p>
            </li>
        </ul>
        <script src="animate.js"></script>
        <script>
var lis=document.getElementById("list").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
    lis[i].Ps=lis[i].getElementsByTagName("p");
    console.log(lis[i].Ps);
    startMove(lis[i].Ps);
}
function startMove(obj){
    var j=0;
    setInterval(function(){
        if(j%2==0){
            obj[0].animate({"top":"-20px"});
            obj[1].animate({"top":"0px"});
        }else{
            obj[0].animate({"top":"0px"});
            obj[1].animate({"top":"20px"});
        }
        j++;
    },1000);
}
        </script>
    </body>
</html>

引用的animate.js

 

Element.prototype.animate=animate;
Element.prototype.getStyle=getStyle;
function animate(json,callback) {
    clearInterval(this.timer);
    for (var attr in json) {
        var that = this;
        this.timer = setInterval(function () {
            if (attr == 'opacity') {
                that.icur = Math.round(parseFloat(that.getStyle()[attr]) * 100);
            } else {
                that.icur = parseInt(that.getStyle()[attr]);
            }
            that.speed = (parseInt(json[attr]) - that.icur) / 10;
            that.speed = that.speed > 0 ? Math.ceil(that.speed) : Math.floor(that.speed);
            if (attr == 'opacity') {
                that.style.filter = 'alpha(opacity:' + that.icur + that.speed + ')';
                that.style.opacity = (that.icur + that.speed) / 100;
            } else {
                that.style[attr] = that.icur + that.speed + "px";
            };
            if(that.icur==parseInt(json[attr])){
                //flags=true;
                clearInterval(that.timer);
                if(callback){
                    callback();
                }
            }
        }, 20);
    }
}
function getStyle() {
    if (this.currentStyle) {
        return this.currentStyle;
    } else {
        return document.defaultView.getComputedStyle(this, null);
    }
}

效果演示：

 

posted @ 2017-07-03 16:27  liliyou  阅读(647)  评论(0)  编辑  收藏  举报