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

最新推荐文章于 2022-04-22 14:23:39 发布

weixin_30847865

最新推荐文章于 2022-04-22 14:23:39 发布

阅读量255

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/baixc/p/3435178.html

版权

实现代码：

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].οnmοusedοwn=function(){
            iSpeed = -5;
            timer = setInterval(doMove,30);
        };

        aBtn[0].οnmοuseup=function(){
            clearInterval(timer);
        };

        aBtn[1].οnmοusedοwn=function(){
            iSpeed = 5;
            timer = setInterval(doMove,30);
        };

        aBtn[1].οnmοuseup=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>