<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 文字上下不间断滚动实例的更多相关文章

  1. IOS跑马灯效果,实现文字水平无间断滚动

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...

  2. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  3. 横向不间断滚动DIV

    横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  4. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  5. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  6. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  7. div+css不间断滚动字幕

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  9. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

随机推荐

  1. O(1) Check Power of 2 - LintCode

    examination questions Using O(1) time to check whether an integer n is a power of 2. Example For n=4 ...

  2. Key Figure中的Aggregation决定了DSO/CUBE转换规则中的Aggregation合计方式

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. Java的final关键字

    使用final关键字做标识有“最终的”含义 final可以修饰类.方法.属性和变量: 修饰类,则该类不允许被继承(即不能有子类) 修饰方法,则该方法不允许被覆盖(重写) 修饰属性,则该属性不会进行隐形 ...

  4. Json不知道key值情况下获取第一个键值对

    JObject jsonData = new JObject(); jsonData.Add("1", "1"); jsonData.Add("2&q ...

  5. 学的一点点ps

    从C语言的代码中解脱开始学ps,看到色彩鲜明的东西,心里只有那么爽.哈哈.只学习3天,虽然只是一些皮毛,可还是学到了一些以前不知道的东西.让我对ps多了很多兴趣,决定以后要自学更多的ps技能.要给图片 ...

  6. redis 库相关命令

    切换数据库: select 1 查看数据库大小:dbsize 清空数据库: flushdb

  7. Server asks us to fall back to SIMPLE auth, but this client is configured to only allow secure connections.

    我是在flume向hdfs 写(sink)数据时遇到的这个错误. Server (是指hdfs) asks us to fall back to SIMPLE auth, but this clien ...

  8. 安卓设备通过USB接口读取UVC摄像头权限问题

    libusb for Android================== Building:--------- To build libusb for Android do the following ...

  9. express-generator安装时出错,最后用VPS解决

    npm install -g express-generator npm ERR! Linux 3.10.0-229.el7.x86_64npm ERR! argv "/usr/local/ ...

  10. python爬虫(1)

    了解python的基本语法后就可以开始了,边学边巩固. 学爬虫那什么是网络爬虫,以下是百度百科的定义:网络爬虫(又被称为网页蜘蛛,网络机器人, 在FOAF社区中间,更经常的称为网页追逐者),是一种按照 ...