jq 文字上下不间断滚动实例
<div class="ruzhuright">
<div class="rzcontent">
<div class="gundongright">
<div class="gdlist">
<font color="red">恭喜</font>【<a href="#">青州在线青州在线青州在线青州在线青州在线</a>】入驻城市114
</div>
<div class="gdlist">
<font color="red">恭喜</font>【<a href="#">海川渔夫海川渔夫</a>】入驻城市114
</div>
<div class="gdlist">
<font color="red">恭喜</font>【<a href="#">湾仔码头</a>】入驻城市114
</div>
<div class="gdlist">
<font color="red">恭喜</font>【<a href="#">思念水饺</a>】入驻城市114
</div>
</div>
</div>
</div> html代码
.ruzhuright{
display: table-cell;
width: 200px;
height: auto;
vertical-align: middle;
padding: 0 2%;
}
.rzcontent{
width: 100%;
height: 34px;
overflow: hidden;
}
.gundongright{
width: 100%;
height: auto;
}
.gdlist{
width: 100%;
line-height: 17px;
height: 34px;
font-size: 12px;
color: #999999;
}
.gdlist a{
color: #007aff;
font-size: 12px;
} css样式
jq代码:
<script>
function lunbo(){
if(!$('.gundongright').is(":animated")){
var wli = $('.gundongright .gdlist').height();
var lli = $('.gundongright .gdlist').length;
var tw = lli*wli;
var witem = wli;
var marl = parseInt($('.gundongright').css('margin-top'));
var endmar = (parseInt(tw/witem)-1)*witem;
if(marl <= -endmar){
$('.gundongright').animate({marginTop:'0px'},300)
}else{
$('.gundongright').animate({marginTop:marl-witem+'px'},300)
}
}
}
var t = setInterval('lunbo()',1000);
</script>
效果图:
jq 文字上下不间断滚动实例的更多相关文章
- IOS跑马灯效果,实现文字水平无间断滚动
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- 横向不间断滚动DIV
横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- div+css不间断滚动字幕
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
随机推荐
- (转) C/C++中const关键字详解
文章转自 http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777416.html 为什么使用const?采用符号常量写出的代码更容易维 ...
- Json2JsonArray JsonArray2StringArray
public String[] json2JsonArray(String str){ JSONArray jsonArray = JSONArray.fromObject(str); String[ ...
- 如何理解 Java 中的 <T extends Comparable<? super T>>
Java 中类似 <T extends Comparable<? super T>> 这样的类型参数 (Type Parameter) 在 JDK 中或工具类方法中经常能看到. ...
- 01 Node.js简介, 安装&配置
Node.js 简介 Node.js 是什么 Node.js 有着强大而灵活的包管理器(node package manager,npm) 目前, 已经有强大第三方工具模块, 例如数据库连接, 网站开 ...
- 多版本Python管理及Python连接MySQL
Python有个非常别扭的地方,就是两个不兼容的版本,很尴尬,有的包只能在低版本的2.7上才能运行,比如即将用到的MySQLdb. 所以首先必须在系统上安装两个版本的Python(貌似在pycharm ...
- flash的动态加载技术
这里所说的动态加载技术, 主要是指代码模块(可以是swc也可以是swf)的动态加载.即主swf在运行的时候, 可以根据需要动态加载所需的代码模块. 为了讨论方便, 下面所说的代码模块都用swc表示,用 ...
- android应用锁之获取前台进程包名方法
通过以下方式来获取前台进程的包名: 1.android api 10-20 通过ActivityManager中getRunningTasks来获取. 2.android api 21- 22(部分没 ...
- 你真的会写单例模式吗-------Java实现
转载: 你真的会写单例模式吗--Java实现 单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好.用对单例模式,还真得费一番脑筋.本文对Java中常见的单例模式写法做了一个总结,如有错漏 ...
- Informix 11.5 SQL 语句性能监控方法及实现
我们知道,在数据库应用系统中,SQL 语句的性能好坏至关重要.如果 SQL 语句性能很差,可能会导致整个数据库应用系统的性能也非常差.那么,如何监控数据库系统中 SQL 语句的性能,导致 SQL 语句 ...
- hdu 3518 (后缀数组)
题目描述: 找出一个字符串中至少重复出现两次的字串的个数(重复出现时不能重叠). code: 后缀数组处理,对于得到height 进行查找... 参考http://blog.csdn.net/mis ...