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( ...
随机推荐
- 数据持久化PlayerPrefs
1.Unity3D中的数据持久化是以键值对的形式存储的,可以看作是一个字典 2.Unity3D中的值是通过键名来读取的,当值不存在时,返回默认值 3.在Unity中只支持int.float.strin ...
- Oracle数据导出导入
总结了几种Oracle导入导出的命令方法,方便以后使用. 数据导出: 1. 将数据库test完全导出,用户名system 密码manager 导出到d:/daochu.dmp中 ...
- day32 并发编程
并发编程 并发编程的理论 python中实现多进程 进程测试 import os import time while True: time.sleep(0.5) print("hahaha& ...
- day10 文件处理指针使用 函数基本使用
一:文件指针 强调:只有t模式下read(n),n代表字符个数,除此之外都是以字节为单位 with open('a.txt',mode='rt',encoding='utf-8') as f: #文本 ...
- Android studio 安装中遇到一些问题的解决办法,分享一下
从eclipse转到android studio也是很无耐,刚开始总是会遇到很多难题,但是都不要轻言放弃. 以下是我遇到的问题,并通过搜索引擎找到的解决办法,善用工具,善用头脑,勿为伸手之人. And ...
- linux下安装kafka
安装条件: 确保zookeeper已经安装成功.zookeeper安装过程见:https://www.cnblogs.com/expiator/p/9853378.html 1.下载kafka 进入A ...
- opsmanage 自动化运维管理平台
关闭防火墙.selinux 更换阿里云 yum源 依赖环境 yum install -y epel-releaseyum install vim net-tools nmon htop rsync t ...
- c++中的类(class)-----笔记(类多态)
1,多态是一种运行期绑定机制,通过这种机制,实现将函数名绑定到函数具体实现代码的目的.一个函数的名称与其入口地址是紧密相连的,入口地址是该函数在内存中的起始地址.如果对一个函数的绑定发生在运行时刻而非 ...
- POJ-3078.Shuffle'm Up(简单模拟题)
这道题做了有四个小时吧,今天一整天都处于边玩边学的状态,我很是不喜欢...一开始用了20分钟模拟,过了样例后TLE了,就在考虑是不是判断是否重复判定的数组开大了,结果一直蛙,后面想到了map判重,结果 ...
- Java使用点滴
1.查找某个字符在字符串中第几次出现的位置 /** * 查找某个字符在字符串中第几次出现的位置 * @param string 要匹配的字符串 * @param i 第几次出现 * @param ch ...