转: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. Redis key 相关命令

    其实本质上,Redis 就是一个Key---Value 数据库.这里我先介绍下Redis中关于的key的相关命令, 注意:key是字符串存储,但是不能使用 空格 或者 “\n”,value 则可以使用 ...

  2. ABP入门系列(8)——Json格式化

    ABP入门系列目录--学习Abp框架之实操演练 讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一节讲呢?当然是做铺垫啊,后面的系列文章会经常和Json ...

  3. Ubuntu 16.04安装配置Samba服务

    Samba是开源软件,用来让Linux系统与Windows系统的SMB/CIFS网络协定做连结,实现Windows主机与Linux服务器之间的资源共享.Samba服务为两种不同的操作系统架起了一座桥梁 ...

  4. iOS自定义视图- SJTextView

    需求: textView 需要placeholder用来提示输入 textView 要做字数限制 textView 禁止表情符号的输入 思考: 因为需求比较通用,便想通过自定义SJTextView来实 ...

  5. css之描点定位方式

    <!-- 描点定位的两张方式 --> <!-- 1.通过id定位 --> <!-- 2.通过name定位 只能用a--> <div> <a hre ...

  6. shell编程其实真的很简单(四)

    上篇我们学习了shell中条件选择语句的用法.接下来本篇就来学习循环语句.在shell中,循环是通过for, while, until命令来实现的.下面就分别来看看吧. for for循环有两种形式: ...

  7. jQuery.sort对DOM元素进行排序

    实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...

  8. 阿里云oss总是提示SignatureDoesNotMatch错误怎么办

    网上的所有阿里云oss(C#)的例子几乎试遍了,为什么还是提示SignatureDoesNotMatch错误?什么原因?怎么办?下载一个阿里云提供的windows客户端发现,依然提示签名错误. 开始怀 ...

  9. TPS及计算方法

    个事务,TPS为6 / 60s = 0.10 TPS.同时我们会知道事务的响应时间(或节拍),以此例,60秒完成6个事务也同时代表每个事务的响应时间或节拍为10秒.   利特尔法则  (Little' ...

  10. 使用devstack搭建openstack Newton 版本的坑

    国外源访问速度慢怎么办? 使用国外源,加之带宽紧张,搭建过程是很累的,这里推荐大家使用一下源: devstack包源.:http://git.trystack.cn pip源: [global] in ...