<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. 转 猫都能学会的Unity3D Shader入门指南(二)

    猫都能学会的Unity3D Shader入门指南(二) 关于本系列 这是Unity3D Shader入门指南系列的第二篇,本系列面向的对象是新接触Shader开发的Unity3D使用者,因为我本身自己 ...

  2. Flex debug版本浏览器选定问题

    原来都用IE进行调试的,今天安装了火狐浏览器,结果出现调试器找不到的错误,如下图 需要做下面设置 "窗口"—>"首选参数",下图位置勾选项改为IE,问题就 ...

  3. js 获取iframe中的元素

    今天要修改编辑器插件中的元素遇到的问题 jquery 在父窗口中获取iframe中的元素 1.Js代码 格式:$("#iframe的ID").contents().find(&qu ...

  4. linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  5. java.lang.ClassNotFoundException和java.lang.NoClassDefFoundError的区别

    java里生成对象有如下两种方式: 1: Object obj = new ClassName(); 直接new一个对象 2: Class clazz = Class.forName(ClassNam ...

  6. 如何浏览并管理 Outlook 邮件?

    当你的邮件多起来的时候你就不得不考虑这个问题了,如何处理各种邮件? 如何浏览并管理 Outlook 邮件? 待续~

  7. SG函数 专题练习

    [hdu1536][poj2960]S-Nim 题意 题意就是给出一个数组h,为每次可以取石子的数目. 然后给你n堆石子每堆si.求解先手能不能赢? 分析 根据\(h\)数组预处理出\(sg[i]\) ...

  8. Python抓取网页中的图片到本地

    今天在网上找了个从网页中通过图片URL,抓取图片并保存到本地的例子: #!/usr/bin/env python # -*- coding:utf- -*- # Author: xixihuang # ...

  9. 计算机网络http,https,tcp,udp,get,post

    一.HTTP 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文, ...

  10. HTML5基本元素初探

    最近看了一些HTML5的基础知识,写了一些小案例,记录一下,方便查找. 1.新建的HTML5页面中显著的变化是:DOCTYPE声明变简洁(<!DOCTYPE html>) / <me ...