列表的鼠标按下滚动抬起停止效果

效果预览：

html部分：

<h2 id="title">淘宝列表 <a href="#">>>更多</a></h2>
<div id="top"></div>
<div id="list">
    <ul id="content">
        <li>
            <h3>标题</h3>
            <img src="img/淘宝图片1.jpg"/>
            <p>描述</p>
        </li>
        <li>
            <h3>标题</h3>
            <img src="img/淘宝图片2.jpg"/>
            <p>描述</p>
        </li>
        <li>
        <h3>标题</h3>
        <img src="img/淘宝图片3.jpg"/>
        <p>描述</p>
        </li>
        <li>
            <h3>标题</h3>
            <img src="img/淘宝图片4.jpg"/>
            <p>描述</p>
        </li>
        <li>
            <h3>标题</h3>
            <img src="img/淘宝图片5.jpg"/>
            <p>描述</p>
        </li>
        <li>
            <h3>标题</h3>
            <img src="img/淘宝图片6.jpg"/>
            <p>描述</p>
        </li>
    </ul>
</div>
<div id="bottom"></div>

h2,h3,p,ul{
            margin: 0;
            padding: 0;}
        #title{
            height: 30px;
            width: 150px;
            margin:0 auto;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            background: #daa20f;
            -webkit-border-radius: 10px 10px 0 0;
            -moz-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;}
        #title a{
            text-decoration: none;
            float:right;
            margin-right: 10px;
            color: #971b2b;
            font-size: 15px;}
        #list{
            height: 300px;
            width: 150px;
            border:1px solid #888888;
            margin: 3px auto 3px auto;
            overflow: hidden;
            position:relative;}
        #list ul{
            position: absolute;
            top: 0;
            left: 0;}
        #list li{
            height: 151px;
            width: 150px;
            list-style: none;
            position: relative;
            border-bottom:1px solid #888888 ;}
        #list h3{
            height: 25px;
            width: 150px;
            text-align: center;
            font-size: 18px;
            font-weight: 300;
            color: #ffffff;
            background: #ff4400;
            opacity: .8;
            position: absolute;
            top: 0;
            left: 0;}
        #list p{
            height: 20px;
            width: 150px;
            background: #ff4400;
            font-size: 15px;
            color: #ffffff;
            opacity: .8;
            position: absolute;
            bottom: 0;
            left: 0;}
        #list img{
            height: 150px;
            width: 150px;}
        #top,#bottom{
            width: 152px;
            height: 20px;
            margin:0 auto;
            background: #c2c2c2 center no-repeat;
            cursor: pointer;}
        #top{
            background-image: url(img/ico2.gif);}
        #bottom{
            background-image: url(img/ico3.gif);}

  window.onload = function () {
            var oTop = document.getElementById('top');
            var oBottom = document.getElementById('bottom');
            var oUl = document.getElementsByTagName('ul')[0];
            var timerUp = null;
            var timerDown = null;


           //动态获取元素的样式

            function getStyle(obj, attr) {
                return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
            }

           //按下向下滑动
            oTop.onmousedown = function () {
                timerUp = setInterval( function () {
                    if (parseInt( getStyle(oUl,'top') ) > -610 ){
                    oUl.style.top = parseInt( getStyle(oUl,'top') ) - 5 +'px';}
                    else{oUl.style.top = '-610px'; }
                } ,50);
            }
            //抬起停止滑动
            oTop.onmouseup = function () {
                clearInterval(timerUp);
            }
            //按下向上滑动
            oBottom.onmousedown = function () {
                timerDown = setInterval( function () {
                    if (parseInt( getStyle(oUl,'top') ) < 0 ){
                        oUl.style.top = parseInt( getStyle(oUl,'top') ) + 5 +'px';}
                    else{oUl.style.top = '0px'; }
                } ,50);
            }
            //抬起停止滑动
            oBottom.onmouseup = function () {
                clearInterval(timerDown);
            }
        }

最后

以上就是英俊豆芽为你收集整理的列表的鼠标按下滚动抬起停止效果的全部内容，希望文章能够帮你解决列表的鼠标按下滚动抬起停止效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。