jquery单行文字上下循环滚动
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>
*{ 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;}
// 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单行文字上下循环滚动的更多相关文章
- Jquery实现文字向上逐条滚动
直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- 单行文字滚动就用myslider
单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...
- Jquery制作--循环滚动列表
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- 【js与jquery】jquery循环滚动新闻
2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...
- jQuery 实现列表自动滚动循环滚动显示新闻通知
需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...
- jQuery关于文字内容溢出用点点点(…)省略号表示
1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...
随机推荐
- oracle取某字符串字段的后4位
参考 https://zhidao.baidu.com/question/2142799026528780468.html select substr('str1234', -4) from dual
- artTemplate/template.js模板将时间格式化为正常的日期
网上提供的方法用不了 自己琢磨的 注意:ajax的异步方式必须设置成true才行,false不起作用.async: true: <script> function timestamp (v ...
- 纯css3棋盘图案背景以及45度斜纹背景
css代码 .stripes { height: 250px; width: 375px; float: left; margin: 10px; ...
- pta l2-4(这是二叉搜索树吗?)
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805070971912192 题意:给定n以及n个整数,问该序列 ...
- Dbutils 连接数据库
用了JDBC后接着学习Dbutils连接数据库 1.添加驱动包 Class.forName("oracle.jdbc.driver.OracleDriver"); 2.获取数据库连 ...
- delet[] 和delete
string *stringPtr1 = new string; string *stringPtr2 = new string[100]; …… delete stringPtr1; delete ...
- 【Android内存泄漏检测】LeakCanary使用总结
一.什么是LeakCanary? LeakCanary就是用来检测Android端内存泄漏的一个工具.能够检测Activity的泄漏 什么是内存泄漏? Java 对象有时也会”长死不死“,GC 拿它没 ...
- mvc下添加 EntityFramework的引用
首先 打开工具-扩展和更新-联机-Visual Studio库,找到NuGet Package Manager 检查是否 安装,如果没有安装 先安装插件 安装成功后,右键点击‘引用’,如下图 然后 ...
- SQL Server 触发器 表的特定字段(一个字段)更新时,触发Update触发器
CREATE TRIGGER [dbo].[Trg_Update_table1_column1] on table1 after update as if update (column1) ...
- swift - 自定义tabbar按钮的操作
1.自定义tabbar按钮 只能 present出来VC 或者 nav. 因为它本身 没有导航控制器, 只有在tabbar 的根导航控制器的 VC 才能push