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

查看效果

下载地址

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>

 

你可能感兴趣的:(JavaScript,html,jquery,XHTML,css)