一个“复制/删除”方式的滚动

一个利用复制和删除节点的方式做的滚动。。。不知性能怎样呢？

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>一个滚动</title>
<style>
*{ margin:0; padding:0;}
#div { width:438px; height:102px; margin:30px auto; border:1px solid #000; overflow:hidden; position:relative;}
#ul1 { position:absolute; left:0;}
#ul1 li { width:100px; height:100px; border:1px solid #F00; float:left; line-height:100px; text-align:center; font-size:60px; list-style:none; margin-right:10px; background:#F0C; color:#FFF;}
</style>
<script src="https://files.cnblogs.com/lbsgood/Animate2.js"></script>
<script>
window.onload = function() {
    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var oLeft = document.getElementById('left');
    var oRight = document.getElementById('right');
    var iNow = 3;
    var i = 0;
    var bBtn = true;

    function setWidth() {
        oUl.style.width = (aLi[0].offsetWidth + 10) * aLi.length + 'px';
    }
    setWidth();
    oLeft.onclick = function() {
        if (bBtn) {
            bBtn = false;
            for (i = 0; i < iNow; i++) {
                var oLi = aLi[i].cloneNode(true);
                oUl.appendChild(oLi);
                setWidth();
            }
            Animate(oUl, {
                left: -(aLi[0].offsetWidth + 10) * iNow
            },
            function() {
                for (i = 0; i < iNow; i++) {
                    oUl.removeChild(aLi[0]);
                    oUl.style.left = '0px';
                }
                bBtn = true;
            })
        }
    }
    oRight.onclick = function() {
        if (bBtn) {
            bBtn = false;
            var oLength = aLi.length;
            for (i = 0; i < iNow; i++) {
                var oLi = aLi[oLength - 1].cloneNode(true);
                oUl.insertBefore(oLi, aLi[0]);
                oUl.style.left =  - iNow * (aLi[0].offsetWidth + 10) + 'px';
                setWidth();
            }
            Animate(oUl, {
                left: 0
            },
            function() {
                for (i = 0; i < iNow; i++) {
                    oUl.removeChild(aLi[aLi.length - 1]);
                }
                bBtn = true;
            })
        }
    }
}
</script>
</head>
<body>
<a href="javascript:;" id="left">Left</a>
<a href="javascript:;" id="right">Right</a>
<div id="div">
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>
</body>
</html>

posted on 2012-06-08 00:38 lbsgood 阅读(163) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

@Asan-走走停停

导航

公告

一个“复制/删除”方式的滚动