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

来源：互联网发布：马龙世界杯2017知乎编辑：程序博客网时间：2024/06/07 20:13

效果预览：

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>

css部分：

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);}

JavaScript部分：

  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);            }        }

阅读全文

0 0