html代码:

<div class="box">
<div class="t_news">
<b>已关联奖励账号、昵称:</b>
<ul class="news_li">
<li>张XX 151****0623</li>
<li>陈XX 159****8933</li>
<li>吴XX 188****5113</li>
<li>徐XX 176****3323</li>
<li>赵XX 187****5553</li>
</ul>
<ul class="swap"></ul>
</div>
</div>
css代码:
*{ padding:; margin:; font-size:12px}
ul,li{ list-style:none;}
.box{ height:35px; overflow:hidden;}
.t_news{ height:19px; color:#444; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
.t_news b{ line-height:17px; font-weight:normal; display:inline-block;}
.news_li,.swap{ line-height:19px; display:inline-block; position:absolute;left:72px;}
.news_li ,.swap {color:#444;}
.swap{top:19px;}
js代码:
// JavaScript Document
function b(){
t = parseInt(x.css('top'));
y.css('top','19px');
x.animate({top: t - 19 + 'px'},'slow'); //19为每个li的高度
if(Math.abs(t) == h-19){ //19为每个li的高度
y.animate({top:'0px'},'slow');
z=x;
x=y;
y=z;
}
setTimeout(b,3000);//滚动间隔时间 现在是3秒
}
$(document).ready(function(){
$('.swap').html($('.news_li').html());
x = $('.news_li');
y = $('.swap');
h = $('.news_li li').length * 19; //19为每个li的高度
setTimeout(b,3000);//滚动间隔时间 现在是3秒
})

jquery单行文字上下循环滚动的更多相关文章

  1. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  2. jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  4. 单行文字滚动就用myslider

    单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...

  5. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

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

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

  7. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  8. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

  9. jQuery关于文字内容溢出用点点点(…)省略号表示

    1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...

随机推荐

  1. Building and using plug-ins for Android

    [Building and using plug-ins for Android] 1.AAR plug-ins and Android Libraries Android Archive (AAR) ...

  2. 学习笔记001之[Android开发视频教学].01_06_Android当中的常见控件

    文本框,按钮 菜单按钮(需复写两个方法) 后续需完成联系代码.

  3. ELK 日志学习

    一.Elasticsearch 安装(所有的版本均使用5.5.0 ,且版需要相同 logstash \ kibana \ filebeat ) 官网下载地址:https://www.elastic.c ...

  4. java面试题:基础知识

    类和对象 Q:讲一下面向对象OOP思想. 面向对象主要是抽象,封装,继承,多态. 多态又分为重载和重写.重载主要是方法参数类型不一样,重写则是方法内容不一样. Q:抽象类和接口有什么区别? 抽象类中可 ...

  5. centos搭建OPENldap

    LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以根据需要定制.与X ...

  6. TOJ4757: 12345(数学)

    传送门 时间限制(普通/Java):1000MS/3000MS     内存限制:65536KByte 描述 为了说明水题也不是那么好AC的,FD出了一个由数字1~5组成的题目,题意如下: 给定一个正 ...

  7. delete[] p与 delete p

    基本类型的对象没有析构函数,所以回收基本类型组成的数组空间用 delete 和 delete[] 都是应该可以的:但是对于类对象数组,只能用 delete[].对于 new 的单个对象,只能用 del ...

  8. 项目总结04:SQL批量导入数据:将具有多表关联的Excel数据,通过sql语句脚本的形式,导入到数据库

    将具有多表关联的Excel数据,通过sql语句脚本的形式,导入到数据库 写在前面:本文用的语言是java:数据库是MySql: 需求:在实际项目中,经常会被客户要求,做批量导入数据:一般的简单的单表数 ...

  9. Linux下more命令C语言实现实践 (Unix-Linux编程实践教程)

    1. more第一版 实现基础功能,显示每一页固定24行文本,“q Enter”退出, “Enter” 下一行, “space Enter”下一页. #include<stdio.h> # ...

  10. ES6中的Promise使用方法与总结

    在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...