控制产品上下滚动

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

时间： 2024-10-09 20:29:58

控制产品上下滚动的相关文章

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可

自定义滚动条——控制文字的滚动

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 {

JS按钮控制内容左右滚动

运行效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS按钮控制内容左右滚动</title> <style> *{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix

android通过代码控制ListView上下滚动

本文将介绍一种通过代码控制ListView上下滚动的方法. 先上图: 按下按钮会触发ListView滚动或停止. 实现该功能并不难,下面给出主要代码MainActivity.java package cn.guet.levide; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.view.View;

利用JS实现键盘控制下拉列表的滚动

昨晚自己倒腾的.估计这种代码只有自己看得懂了.第一篇博文,纪念一下. 代码插入这个还是比较方便的~~ var keyHandler=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; var hoverCSS={ color: '#FFF', 'background-color': '#6E9DE4' }; var backCSS={ color:'#000', 'back

控制鼠标滚轮滚动的两种方法

1 $(function(){ 2 // jquery 兼容的滚轮事件 3 var strat = true; 4 var mark = 0; 5 $(document).on("mousewheel DOMMouseScroll", function (e) { 6 var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome

js控制滚动条自动滚动

效果如图: css: #box {    width: 500px;    height: 200px;    overflow: auto;    border: 1px #000 solid;    margin: 20px auto 0;} javascript: <script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="

控制ClistCtrl的滚动的位置

int nItem = m_listCtrl.GetTopIndex(); CRect rc; m_listCtrl.GetItemRect(nItem, rc, LVIR_BOUNDS); CSize sz(0, (nSel - nItem)*rc.Height()); m_listCtrl.Scroll(sz); m_listCtrl.SetItemState(nSel, LVIS_SELECTED, LVIS_SELECTED);

鼠标滚轮控制页面横向滚动

metrojs.js和jquery.mousewheel.min.js这两个是必须要有的 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-1.4.2.min.js" type="text/javascript"><