jquery实现名单滚动
转: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实现名单滚动的更多相关文章
- jquery文字左右滚动
实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 【js编程艺术】小制作六
1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- [nodejs] day1-创建服务器
一.使用匿名函数(新建文件service.js)创建一个服务器: var http = require("http"); //Node.js自带的 http 模块,并且把它赋值给 ...
- C语言高效位操作
思考: 1. 如何将一个数据中的多个不连续位清位? 1. 如何将一个数据中的多个不连续位置位? 1. 如何反转一个数据中的多个不连续位(1->0, 0->1)? 基础知识:C 语言位操作 ...
- 制作jar文件
一.制作可运行jar文件 使用java的swing.awt制作了一个简单的界面交互模块.程序打成jar包后,能双击运行,制作过程: 1.eclipse →properties →Export,选择ja ...
- java_JDBC字段对应
地址: http://otndnld.oracle.co.jp/document/products/oracle10g/102/doc_cd/java.102/B19275-03/datacc.htm ...
- .NET中代理服务器WebProxy的各种用法
引用地址 引用 因为涉及到代理的各种情况,WebRequest和WebProxy类的文档写的相当复杂,不但各个文档关注点不同,而且不同版本的同一文档也有小小的区别,网上也没有关于这个类的相关文章.于是 ...
- java 多线程安全问题-同步代码块
/* 多线程的安全问题: while(true) { if(tick>0) { //线程0,1,2,3在余票为1时,都停滞在这里,之后分别获得CPU执行权,打印出0,-1,-2等错票 Syste ...
- dotnet new 命令使用模板
dotnet new 命令使用模板快速生成单页应用. 最新版.NET Core SDK RC4 最大改动是更新了 dotnet new 命令. dotnet new 默认不再创建控制台应用,而是展示帮 ...
- 单页应用SPA的路由
关于单页应用 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用 ...
- iptables 完成联网控制 (续) ,独立native进程监听。
上一篇:http://www.cnblogs.com/oscar1011/p/5243877.html 之前做的iptables 来进行的联网控制,一直耿耿于怀,想要知道系统里的netd等等是如何做到 ...