基于jquery的文字向上跑动类似跑马灯的效果

 想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个

页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div class="recordList"> 
<ul class="tpl-rotate-recordList" style="margin-top: 0px;"> 
<li class="tpl-rotate-recordList-item"> 
恭喜187****5204获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜137****1372获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜156****0276获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜139****9856获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜138****8118获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****5555获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
</ul> 
</div>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*自动轮换xuyw*/ 
var AutoScroll = function(a) { 
$(a).find("ul:first").animate( { 
marginTop : "-20px" 
}, 500, function() { 
$(this).css( { 
marginTop : "0px" 
}).find("li:first").appendTo(this) 
}) 
} 
if ($(".recordList ul li").length > 0) { 
setInterval('AutoScroll(".recordList")', 2000) 
} else { 
$(".recordList").hide() 
}
时间： 2024-09-16 11:42:45

基于jquery的文字向上跑动类似跑马灯的效果的相关文章

基于jquery的文字向上跑动类似跑马灯的效果_jquery

想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 <div class="recordList"> <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> <li class="tpl-rotate-recordList-item"> 恭喜187****5204获得1000RBM &

Android 纵向跑马灯滚动效果

像淘宝和京东都会有跑马灯的效果,今天给大家贡献下以前项目的一个demo,各位看官,且看效果图. 我们先定义一个Bean文件,这个实体类文件主要包含标题,内容描述,以及还有跳转的链接. LampBean  public class LampBean implements Serializable { public String title; public String info; } 接下来我们要去自定义一个LampView了,Lamp主要实现数据的接受,适配器填充数据,以及滚动实现,这里可以看出

jquery单行文字向上滚动效果示例

 这篇文章主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下 代码如下: <body>  <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div>    <div id="content" class="infocontent">  <div id="top" cla

jquery单行文字向上滚动效果的实现代码_javascript技巧

<body> <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> <li>央视3

11个用于提高排版水平的基于jquery的文字效果插件_jquery

排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+

基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载_jquery

基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

基于jQuery实现的双11天猫拆红包抽奖效果_jquery

本文实例讲述了jQuery实现的双11天猫拆红包抽奖效果代码,是一款基于jquery+css3实现的鼠标点击红包摇一摇抽奖代码,具有点击抽奖后红包摇动并弹出抽奖结果信息的功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: HTML部分: <div class="opacity" style="display: none;"></div> <div class="red"><img

基于jquery实现左右按钮点击的图片切换效果_jquery

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析1.需求分析点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示.2.html结构分析 <div class="activity" id="activity-slide"> <a href=&q

iOS 跑马灯滚动条效果程序代码

跑马灯效果的滚动条,一般出现在ios应用的底部.用于显示动态变化的信息或内容较长的信息,在个类应用中使用广泛 以下两种可用的跑马灯滚动MarqueeBar的实现. 1.直接在ViewController中实现对UIView的位置定时移动来实现,以下代码直接加入到ViewController中,在viewWillAppear中调用loadView即可.    代码如下 复制代码 - (void)marqueeView {       CGRect frame = self.vMarqueeCont