首页 > 代码库 > 控制产品上下滚动

控制产品上下滚动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function ()
{
    var odiv = document.getElementById(‘content‘);
    var oul = odiv.getElementsByTagName(‘ul‘)[0];
    var otop = document.getElementById(‘top‘);
    var odown = document.getElementById(‘down‘);
    var timer;
    
    function getstyle(obj,attr)
    {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    };
    //向下
    function down()
    {
        
        if( parseInt(getstyle(oul,‘top‘)) > -380 )
        {
            
            oul.style.top = parseInt(getstyle(oul,‘top‘)) - 10 + ‘px‘;
        }
        else
        {
            oul.style.top = ‘-380px‘;
        }
    };
    //向上
    function up()
    {
        if( parseInt(getstyle(oul,‘top‘)) < 0 )
        {
            oul.style.top = parseInt(getstyle(oul,‘top‘)) +10 + ‘px‘;
        }
        else
        {
            oul.style.top = ‘0px‘;
        }
    };
    
    otop.onmousedown = function ()
    {
        timeup = setInterval( up , 50);
    };
    otop.onmouseup = function ()
    {
        clearInterval(timeup);
    };
    odown.onmousedown = function ()
    {

        timedown = setInterval( down , 50)
    };
    odown.onmouseup = function ()
    {
        clearInterval(timedown);
    };
}
</script>

<style>
*{
    margin:0px;
    padding:0px;
    list-style-type:none;
    }
h2{
    width:170px;
    background:#F69;
    color:#fff;
    font-size:14px;
    padding:5px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    margin:20px auto 0px;
    text-align:center;
    }
#content{
    width:160px;
    height:450px;
    overflow:hidden;
    padding:20px 10px;
    border: 1px #eee solid;
    position:relative;
    margin:0 auto;
    }
#top,#down{
    width:100%;
    height:20px;
    position:absolute;
    left:0px;
    cursor:pointer;
    z-index:1;
    }
#top{
    top:0px;
    background:url(img/arrowUp.png) no-repeat center center #CCCCCC;
    }    
#down{
    bottom:0px;
    background:url(img/arrowDown.png) no-repeat center center #CCCCCC;
    }    
#content ul{
    position:relative;
    top:0px;
    }    
#content li{
    border-bottom:1px dashed #CCC;
    position:relative;
    padding-bottom:5px;
    }
#content h3{
    font-size:14px;
    line-height:28px;
    }
#content .time{
    padding-top:10px;
    color:#666;
    }                    
</style>
</head>

<body>
<h2>网站选项</h2>
<div id="content">
    <div id="top"></div>
    <ul>
        <li>
            <h3>标题一</h3>
            <p>内容1</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题二</h3>
            <p>内容2</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题三</h3>
            <p>内容3</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题四</h3>
            <p>内容4</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题五</h3>
            <p>内容5</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题六</h3>
            <p>内容6</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题七</h3>
            <p>内容7</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题八</h3>
            <p>内容8</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题九</h3>
            <p>内容9</p>
            <p class="time">12:00</p>
        </li>
        <li>
            <h3>标题十</h3>
            <p>内容10</p>
            <p class="time">12:00</p>
        </li>

    </ul>
    <div id="down"></div>
</div>
</body>
</html>

控制产品上下滚动