图片上下滑动（鼠标点击才动）

实现代码：

HTML+CSS:

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    *{margin: 0px;padding: 0px;}
    body{background-color: #eee;padding: 100px;}
    a{text-decoration: none;}
    b{display: block;height: 40px;width: 40px;line-height: 40px;border-radius: 40px;background-color: #117b1c;color: #fff;text-align: center;cursor: pointer;}
    #box{position: relative;height: 312px;width: 92px;padding: 10px;border: 1px solid #ccc;overflow: hidden;}
    #box ul{position: absolute;top: 0;left: 0;}
    #box ul li{list-style: none;height: 100px;width: 100px;padding: 5px;}
    #box ul li a{display: block;width: 100px;height: 100px;border: 1px solid #000;}
    #box ul li.no1 a{background-color: #99CC33;}
    #box ul li.no2 a{background-color: #FF6666;}
    #box ul li.no3 a{background-color: #336699;}
    #box ul li.no4 a{background-color: #99CCCC;}
</style>
</head>
<body>
    <b>↑</b>
    <div id="box">
        <ul>
            <li class="no1"><a href="javascript:;'">111</a></li>
            <li class="no2"><a href="javascript:;'">222</a></li>
            <li class="no3"><a href="javascript:;'">333</a></li>
            <li class="no4"><a href="javascript:;'">444</a></li>
        </ul>
    </div>
    <b>↓</b>
</body>
</html>

js:

<script>
    window.onload=function(){
        var oBox = document.getElementById('box');
        var oUl = oBox.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var aBtn = document.getElementsByTagName('b');
        var timer = null;
        var iSpeed = -5;

        oUl.innerHTML+=oUl.innerHTML;

        aBtn[0].onmousedown=function(){
            iSpeed = -5;
            timer = setInterval(doMove,30);
        };

        aBtn[0].onmouseup=function(){
            clearInterval(timer);
        };

        aBtn[1].onmousedown=function(){
            iSpeed = 5;
            timer = setInterval(doMove,30);
        };

        aBtn[1].onmouseup=function(){
            clearInterval(timer);
        };

        function doMove(){
            oUl.style.top = oUl.offsetTop + iSpeed +'px';

            if(oUl.offsetTop < -oUl.offsetHeight/2){
                oUl.style.top = '0';
            }
            else if(oUl.offsetTop > 0){
                oUl.style.top = -oUl.offsetHeight/2 + 'px';
            }
        };

    }
</script>

效果如下图所示：

图片上下滑动（鼠标点击才动）

相关推荐