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>

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/28/1766414.html

jQuery 仿iGoogle视频的列表拖动缓冲特效相关推荐

探探php模板下载,C3+H5+jQuery仿探探APP手机滑动切换特效
C3+H5+jQuery仿探探APP手机滑动切换特效这是一款很不错的jQuery仿探探APP手机滑动切换特效,手机端网页滑动翻页上一页下一页切换代码 /*移动动画*/ animateMove:fun ...
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler
效果如下: 可以调整参数如下: CSDN下载地址: 上传到csdn 不见了等出现了再贴地址.. js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler-Javascript文档类资源-CSD ...
android+高仿视频录制,android高仿微信视频编辑页
android高仿微信视频编辑页-视频多张图片提取上一篇中介绍了有关视频提取图片的知识点,如果对这个不太了解建议看下android提取视频多张图片和视频信息之前这篇. 这里实现的是仿微信的视频编辑 ...
android高仿微信视频编辑页-视频多张图片提取
android高仿微信视频编辑页-视频多张图片提取上一篇中介绍了有关视频提取图片的知识点,如果对这个不太了解建议看下android提取视频多张图片和视频信息之前这篇. 这里实现的是仿微信的视频编辑 ...
[iOS]仿微博视频边下边播之滑动 TableView 自动播放
注意:框架已经迭代到2.0版本,我重新架构了整个框架,API 也得到了更好的设计,我为 2.0 版本的实现写了一篇文章 [iOS]如何重新架构 JPVideoPlayer ?.此文中的实现思路仍然是一 ...
[iOS]仿微博视频边下边播之滑动TableView自动播放
Tips:这次的内容分为两篇文章讲述 01.[iOS]仿微博视频边下边播之封装播放器讲述如何封装一个实现了边下边播并且缓存的视频播放器. 02.[iOS]仿微博视频边下边播之滑动TableView自 ...
仿微博视频边下边播之封装播放器
来源:NewPan(@盼盼_HKbuy) 链接:http://www.jianshu.com/p/0d4588a7540f Tips:这次的内容分为两篇文章讲述 01.[iOS]仿微博视频边下边播之封 ...
用jQuery仿京东收货地址
代码优化及修正说明,新增两个功能,第一.指定parentId[用于筛选对应数据的根节点数],第二.返回所选择的数据数据及创建的class名称[用于重新绑定点击事件].代码实例及创建代码如下: < ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
iOS开发之仿微博视频边下边播之自定义AVPlayer播放器，边下边播解剖。视频处理流程，建立连接-请求数据-统筹数据-解码数据-视频呈现
Tips:这次的内容分为两篇文章讲述 01.[iOS]仿微博视频边下边播之封装播放器讲述如何封装一个实现了边下边播并且缓存的视频播放器. 02.[iOS]仿微博视频边下边播之滑动TableView自 ...

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

jQuery 仿iGoogle视频的列表拖动缓冲特效相关推荐

最新文章

热门文章