转：http://www.qdfuns.com/notes/25341/917d9cb031f835a086dd445b77b6e04e.html

介绍：
记录滚动特效。
就是那一排文字不停地滚啊滚啊滚得特效，在抽奖活动结果显示啦、报名结果显示上用的非常频繁。当年总是希望在抽奖结果面板上看到自己的名字，然而二十几年了都没见过一次2333，这个活动特效可以让结果显示看起来更加灵动，接下来我就说一下这个特效得实现方法。

思路：
-用一个div包裹住ul，并设置溢出外层div 的都隐藏（overflow为hidden）；
-设置他们为相对定位，用top值来控制ul向上移动；
-每次向上移动一个li的高度后，将第一个li插入到列表最后端。
-这样就可以使记录不断向上移动，制造列表滚动的效果。
（PS：这里使用的是模拟数据，在真实应用场景中，可用Ajax获取后端真实数据再插入DOM中。）

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>记录滚动</title>

    <style>

    .panel{

        width:340px;

        padding:10px;

        text-align: center;

        background-color:#FF3C3C;

        border-radius: 0 0 8px 8px;

     }

    h2{

        color:#fff;

        margin: 5px;

    }

    .activity{

        width: 300px;

        margin: 0 auto;

        position: relative;

        overflow: hidden;

        height: 165px;

        background-color: #fff;

        border-radius: 5px;

    }

    .activity ul{

        top: -15px;

        padding: 0;

        color: #666;

        position: relative;

    }

    .activity li{

        height: 34px;

               padding:0;

        font-size: 12px;

        line-height: 34px;

                list-style: none;

        border-bottom: 1px dotted #d2d2d2;

    }

    </style>

    </head>

    <body>

      <div class="panel">

        <h2>活动动态</h2>

        <div class="activity" id="J_Activity">

            <ul>

                <li>user1 获得了7折优惠券</li>

                <li>user2 获得了8折优惠券</li>

                <li>user3 获得了7折优惠券</li>

                <li>user4 获得了5折优惠券</li>

                <li>user5 获得了4折优惠券</li>

            </ul>

        </div>

      </div>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    <script type="text/javascript" charset="utf-8">

    $(function () {

        var listPanel = $('#J_Activity ul');

        var z = 0;//向上滚动top值

        function up() {//向上滚动

            listPanel.animate({//中奖结果

                'top': (z - 35) + 'px'

            }, 1500, 'linear', function () {

                listPanel.css({'top': '0px'})

                .find("li:first").appendTo(listPanel);

                up();

            });

        }

        up();

    });

    </script>

</html>

效果如下：

jquery实现名单滚动的更多相关文章

  1. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

  2. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  3. 【jQuery】scroll 滚动到顶部

    Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...

  4. jQuery BreakingNews 间歇滚动

    BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...

  5. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  9. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. C++ Primer 笔记 第三章

    C++ Primer 第三章 标准库类型 3.1using声明 例: using namespace atd; using std::cin; 3.2string类型 初始化方式 string s1 ...

  2. C# 6 与 .NET Core 1.0 高级编程 - C# 6 改进

    个人原创译文,转载请注明出处.有不对的地方欢迎指出与交流. 英文原文:Professional C# 6 and .NET Core 1.0 - What's New in C# 6 C# 6 改进 ...

  3. css浮动(float,clear)

    1. 以div元素布局为例,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流,是指标准流中的div. 无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”,显然标准 ...

  4. C++ 头文件系列 (bitset)

    简介 该头文件有关位集,实际上是vector 位 位本质上对应bool的概念,只有0或1,true或false两种对立的值. 但很可惜,字节才是机器上最小的存储单元,所以bool基本上是由一个字节大小 ...

  5. centos 7安装es 及异常处理

    首先,我们从官网下载zip包:(官网:https://www.elastic.co/downloads/elasticsearch)   直接使用浏览器下载可能会很慢,我一般会copy下载链接,然后w ...

  6. 《浅谈架构之路：单点登录 SSO》

    前言:SSO 单点登录 “半吊子”的全栈工程师又来了,技术类的文章才发表了两篇,本来想先将主攻的几个系列都开个头(Nodejs.Java.前端.架构.全栈等等),无奈博客起步太晚,写博文的时间又没有很 ...

  7. 【前端】:Dom

    前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.D ...

  8. 事件详解<一>

    一 扭转对事件的认知 事件,是js和html交互的桥梁.当用户操作页面上的元素,比如点击,鼠标移入移出,然后做一些事情. 你若触发,我便执行--事件发生,调用它的处理函数执行相应的JavaScript ...

  9. 华硕ASUS笔记本 中间5个指示灯分别表示什么

    1.图案像个灯的叫电源状态指示灯:当笔记本电脑启动时,电源状态指示灯便会亮起来并会在笔记本电脑进入休眠模式(Sleep Mode,Suspend-to-RAM)时缓慢闪烁.当笔记本电脑关机或进入休眠模 ...

  10. win8命令行

    Win8运行命令.快捷键大全合集 目前看来,Win8还不错,好的产品就是能在短时间改变你使用习惯的产品,首先来给大家讲下windows8 运行命令在哪?其实你可以用Win+R或者你用 WIN+Q再在A ...