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 library function - freopen()
Description The C library function FILE *freopen(const char *filename, const char *mode, FILE *strea ...
- Educational Codeforces Round 6 E. New Year Tree dfs+线段树
题目链接:http://codeforces.com/contest/620/problem/E E. New Year Tree time limit per test 3 seconds memo ...
- spring+mybatis
---恢复内容开始--- 使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地 ...
- iOS修改手机定位(非越狱任意位置)
利用开发者的一些调试功能,我们可以修改非越狱的苹果手机定位,模拟任意位置. 经测试,此方法仅限开发者调试使用,并不能长时间修改手机定位. 1. 首先需要了解一些坐标系的知识 iOS,原生坐标系为 WG ...
- Django1.9开发博客(12)- i18n国际化
国际化与本地化的目的为了能为各个不同的用户以他们最熟悉的语言和格式来显示网页. Django能完美支持文本翻译.日期时间和数字的格式化.时区. 另外,Django还有两点优势: 允许开发者和模板作者指 ...
- 解决Selenium与firefox浏览器版本不兼容问题
因为在用java打开firefox浏览器的时候报错 org.openqa.selenium.firefox.NotConnectedException: Unable to connect to ho ...
- loading
<!doctype html> <html> <head> <title>实惠福利</title> <meta charset=&qu ...
- 使用ASP.NET 上传文件 三种类型判断方法(后缀,MIME,数据流)
#region 一. 安全性比较低,把文本文件1.txt改成1.jpg照样可以上传,但其实现方法容易理解,实现也简单,所以网上很多还是采取这种方法. Boolean fileOk = false; s ...
- R语言apply函数族笔记
为什么用apply 因为我是一个程序员,所以在最初学习R的时候,当成“又一门编程语言”来学习,但是怎么学都觉得别扭.现在我的看法倾向于,R不是一种通用型的编程语言,而是一种统计领域的软件工具.因此,不 ...
- iOS开发Swift篇—(七)函数(1)
iOS开发Swift篇—(七)函数 一.函数的定义 (1)函数的定义格式 func 函数名(形参列表) -> 返回值类型 { // 函数体... } (2)形参列表的格式 形参名1: 形参类型1 ...