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

kkk863114

浏览: 76174 次
性别:
来自: 深圳

最近访客更多访客>>

lg295452

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

jquery

jQuery CSS JavaScript XHTML HTML

查看效果

下载地址

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>

分享到：

经典的jQuery图片广告轮番切换特效 | 超炫jQuery3D图片旋转放大特效实例

2010-06-28 00:51
浏览 1017
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

jQuery图片渐变效果

jquery imagecropper 图片截取插件实例代码

jQuery 大幅文字+图片滚动变幻的动画布局示

jQuery 滑动门菜单

jquery的弹出层代码演示

KinSlideshow jQuery 多样式图片幻灯片插件

jquery Ajax表单输入检测验证一例

jQuery “菊花文”文字转换工具

Jquery的很酷的黑色链接

jQuery 版坦克大战游戏

jquery Json Ajax搜索与分页效果代码

jQuery Select 下拉单选框模拟插件 V1.3.6

jQuery超酷菜单

jquery 仿3D效果

jQuery的左右移动图

收缩与放大图片效果（JS+CSS）

五星菜单效果

用JS实现的图片滑动效果，超酷

打包分享几十种常用的JS代码例子

jquery用ul模拟表单select列表/菜单效果

最近访客更多访客>>