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的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
随机推荐
- 教你解决Sublime Text中文乱码问题
教你解决Sublime Text中文乱码问题[转载自成长的企鹅] Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. ...
- PHP基础知识之————php5-cli 的安装以及phpredis的安装
在系统安装完后最好执行下列命令更新下软件 sudo apt-get update 安装php5-cli apt-get install php5-cli 下载phpredis wget https:/ ...
- Ubuntu安装Vim编辑器
1 安装Vim编辑器 由于Ubuntu预安装的是tiny版本,就会导致我们在使用上的产生不便. 所以我们要安装vim的full版本. 1.1 卸载旧版vi sudo apt-get remove vi ...
- (转) C++中基类和派生类之间的同名函数的重载问题
下面有关派生类与基类中存在同名函数 fn: class A { public: void fn() {} void fn(int a) {} }; class B : public A { publi ...
- [css]样式合并与模块化
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...
- Lambert漫反射.BLinnPhong及Phong模型 Unity自带的在Lighting.cginc里
1.漫反射 此模型属于经验模型,主要用来简单模拟粗糙物体表面的光照现象 此模型假设物体表面为理想漫反射体(也就是只产生漫反射现象,也成为Lambert反射体),同时,场景中存在两种光,一种为环境光,一 ...
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- 4s前置摄像头调用
最近做了个抓拍的功能需要调用前置摄像头,在5s,6s,6plus上面都能正常调用,但是在4s上调用摄像头会出现白色.开始以为是手机的原因,后来百度4s的前后摄像头的像素,发现前置摄像头的像素非常低,于 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- zoj 1789 The Suspects
好高兴,又AC一道 ,不过是很类似的两道..还是好高兴呀思想跟2833是一样的,不过要重新设计输入和输出.老师上课又重新讲解了一下,因为嫌疑人已知是0,所以加入集中时应该默认让数值小的做树根,即最终让 ...