jQuery 仿iGoogle视频的列表拖动缓冲特效

前台部分代码

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scroll</title>
<style type="text/css">
    *{margin:0;padding:0}
    body{
        font-size:12px;
    }
    h1,#wrap{
        width: 300px;
        margin: 0 auto;
        padding:30px;
    }

    #scroll {
        width: 300px;
        height: 400px;
        overflow: auto;
        display:block;
        border:1px solid #ccc;
        margin: 30px auto;
    }
    #scroll li {
        display:block;
        border:1px solid #ccc;
        background: #EBCFFF;
        color:#333;
        padding: 10px;
    }
    #scroll li.alt {
        color:#333;
        background:#D9CFFF;
    }
</style>
</head>
<body>
    <h1>7,最终效果</h1>

    <ul id="scroll" >
        <li>列表数据1</li>
        <li class="alt">列表数据2</li>
        <li>列表数据3</li>
        <li class="alt">列表数据4</li>
        <li>列表数据5</li>
        <li class="alt">列表数据6</li>
        <li>列表数据7</li>
        <li class="alt">列表数据8</li>
        <li>列表数据9</li>
        <li class="alt">列表数据10</li>
        <li>列表数据11</li>
        <li class="alt">列表数据12</li>
        <li>列表数据13</li>
        <li class="alt">列表数据14</li>
        <li>列表数据15</li>
        <li class="alt">列表数据16</li>
        <li>列表数据17</li>
        <li class="alt">列表数据18</li>
        <li>列表数据19</li>
        <li class="alt">列表数据20</li>
        <li>列表数据21</li>
        <li class="alt">列表数据22</li>
        <li>列表数据23</li>
        <li class="alt">列表数据24</li>
        <li>列表数据25</li>
        <li class="alt">列表数据26</li>
        <li>列表数据27</li>
        <li class="alt">列表数据28</li>
        <li>列表数据29</li>
        <li class="alt">列表数据30</li>
        <li>列表数据31</li>
        <li class="alt">列表数据32</li>
        <li>列表数据33</li>
        <li class="alt">列表数据34</li>
        <li>列表数据35</li>
        <li class="alt">列表数据36</li>
        <li>列表数据37</li>
        <li class="alt">列表数据38</li>
        <li>列表数据39</li>
        <li class="alt">列表数据40</li>
    </ul>

    <div id="wrap">
    把滚动条去掉，把overflow:auto  -- > overflow:hidden;即可达到效果，但直接改css这个并不太好。为什么？当用户禁用javascript的时，那么截断的部分将无法显示。所以我们仍保持css中的overflow为 auto，通过js来重新设置overflow为 hidden；当用户启用js的时候，才设置为hidden。禁用js的时候，那么列表将会出现默认的滚动条，保证了可用性。<br/>

    </div>

    <script src="jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

        var $this  =  $("#scroll");
        var start_hand = "url(start_hand.cur),pointer";
        var end_hand = "url(end_hand.cur),pointer";
        var y = 0;

        $this
            .css({"cursor":start_hand , overflow: "hidden"})
            .mousedown(startDrag)
            .mouseup(endDrag)
            .mouseleave(endDrag);

        function startDrag(e){
            $this.css("cursor", end_hand)
                 .stop(true, false)
                 .mousemove(moveDrag);
            y = e.pageY;
            return false;
        }

        function moveDrag(e){
            var pos_y = e.pageY - y;
            $this.animate({scrollTop : "-="+pos_y},20);
            y = e.pageY;
            return true;
        }

        function endDrag(e){
            $this
                .css("cursor", start_hand)
                .unbind("mousemove",moveDrag);
            return true;
        }

    });
    </script>

</body>
</html>

posted @ 2010-06-28 00:53 深邃老马阅读(493) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

深邃老马

逆水行舟，不进则退

jQuery 仿iGoogle视频的列表拖动缓冲特效

公告