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( ...
随机推荐
- nginx反向代理:两个域名指向不同web服务端口
一台服务器上安装了zabbix服务和jumpserver服务,两个域名zabbix.xxxx.xxxx和jumserver.xxx.xxxx 一.编辑/etc/nginx/conf.d目录下nginx ...
- Django 自定义 过滤器和模板标签
代码布局(自定义的代码,放在哪里) 二种方式:1. 某个app特有的 -app 目录下,templatetags 文件夹 ** 必需是这个名称的包(目录中有__init__.py文件) -再到 ...
- redis 4 集群重启与数据导入
1.redis 4 平时启用aof db与每天的完整备份. 2.集群状态检查 cluster info 检查集群状态 cluster nodes 检查节点状态 redis-cli -c -p 7000 ...
- 侯捷STL课程及源码剖析学习1
1.C++标准库和STL C++标准库以header files形式呈现: C++标准库的header files不带后缀名(.h),例如#include <vector> 新式C hea ...
- js 计算丢失精度问题
计算时用parseFloat,计算完后转换成Number对象 var ytje = parseFloat("0.03"); var handlecharge = parseFloa ...
- unity中Camera.ScreenToWorldPoint
Camera.ScreenToWorldPointVector3 ScreenToWorldPoint(Vector3 position); 将屏幕坐标转换为世界坐标. 如何转换?假如给定一个所谓的屏 ...
- 100-days: Six
Title: School lessons (be) to cover sexting, FGM and mental health(精神健康) be to do sth 将要做某事 => ...
- TypeError: 无法设置未定义或 null 引用的属性“src” ——IE浏览器不兼容图片懒加载vueLazy
异常分析: 谷歌浏览器访问正常,IE浏览器访问部分图片无法正常展示,查看控制台,输入如下错误信息: 经分析,只有使用过图片懒加载的地方图片展示才有问题,那么就应该是图片懒加载vue-lazyload这 ...
- TZOJ 4325 RMQ with Shifts(线段树查询最小,暴力更新)
描述 In the traditional RMQ (Range Minimum Query) problem, we have a static array A. Then for each que ...
- [ERR] Node 192.168.25.135:7001 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
原文链接:https://www.cnblogs.com/huxinga/p/6644226.html 解决办法:将redis全部shutdown 将每个节点下aof.rdb.nodes.conf本地 ...