码迷,mamicode.com
首页 > 其他好文 > 详细

控制产品上下滚动

时间:2014-12-20 00:42:04      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

控制产品上下滚动

标签:

原文地址:http://www.cnblogs.com/mayufo/p/4174851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!