js百叶窗效果

Html

Css


    
        
            1111111111111
            2222222222222
        
    
    
        
            33333333333333
            44444444444444
        
    
    
        
            555555555555555
            666666666666666
        
    
    
        
            777777777777777
            88888888888888
        
    
    
        
            999999999999999
            ddddddddddddddd
        
    
    
        
            aaaaaaaaaaaaaaaa
            cccccccccccccccc
        
    



    
        
            1111111111111
            2222222222222
        
    
    
        
            33333333333333
            44444444444444
        
    
    
        
            555555555555555
            666666666666666
        
    
    
        
            777777777777777
            88888888888888
        
    
    
        
            999999999999999
            ddddddddddddddd
        
    
    
        
            aaaaaaaaaaaaaaaa
            cccccccccccccccc

* {
	padding:0;
	margin:0;
}
li {
	list-style:none;
}
#ul1,#ul2 {
	width:300px;
	height:auto;
	float:left;
	border-top:1px solid #000;
	margin:20px;
}
li {
	width:100%;
	height:30px;
	overflow:hidden;
	position:relative;
	border-bottom:1px dashed #333;
	line-height:30px;
}
li div {
	position:absolute;
	top:-30px;
	left:0;
}
li div p {
	height:30px;
}

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
    obj.iTimer = setInterval(function() {

var iBtn = true;

for (var attr in json) {
            var iTarget = json[attr];
            if (attr == "opacity") {
                iCur = Math.round(css(obj, "opacity") * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

iSpeed = (iTarget - iCur) / 8;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur != iTarget) {
                iBtn = false;
                if (attr == "opacity") {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

}
        if (iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

}, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

window.onload = function() {
    var oUl = document.getElementById("ul1");
    var oUl2 = document.getElementById("ul2");

toShow(oUl);
    setTimeout(function() {
        toShow(oUl2);
    }, 2000);

function toShow(obj) {
        var aDiv = obj.getElementsByTagName("div");
        var iNow = 0;
        var timer = null;
        var bBtn = true;
        setInterval(function() {
            toChange();
        }, 4000);

}, 100);
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js百叶窗效果



代码描述：js百叶窗滚动效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

小叶

相关代码

js百叶窗效果

最新