jquery无缝间歇向上滚动(间断滚动)
jquery无缝间歇向上滚动
JS部份
$(function(){
var $this = $(".renav");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, );
}).trigger("mouseout");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height();
$self.animate({ "margin-top" : -lineHeight +"px" }, , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
})
}
HTML部份
<style type="text/css">
.renav{
width:200px;
height:150px;
line-height:21px;
overflow:hidden;
background:#FFFFFF;
}
.renav li{
height:21px;
}
</style>
<div class="renav">
<ul style="margin-top: 0px;">
<li><a>罗氏</a></li>
<li><a>瑞声达</a></li>
<li><a>未添加1</a></li>
<li><a>未添加2</a></li>
<li><a>未添加3</a></li>
<li><a>未添加4</a></li>
<li><a>西门子</a></li>
<li><a>欧姆龙</a></li>
</ul>
</div>
jquery无缝间歇向上滚动(间断滚动)的更多相关文章
- jQuery无缝间歇向上滚动
http://www.jiangweishan.com/article/jQuery-scroll-up.html
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- jQuery带控制按钮向上和向下滚动文本列表
效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- android 显示 PDF 文件
1.开源项目地址 : https://github.com/JoanZapata/android-pdfview 2.引用 compile 'com.joanzapata.pdfview:androi ...
- 【代码笔记】iOS-日历
一, 效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "CalendarView.h ...
- google 火狐 模拟显示手机页面插件
google user agent switcher扩展 火狐 user agent switcher
- css浮动
一.浮动介绍 历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”. 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边 ...
- 1、开篇:PMO定义 - PMO项目管理办公室
PMO,Project Management Office,项目管理办公室,笔者不按照项目管理知识体系指南PMBOK(Project Management Body Of Knowledge)上的定义 ...
- SQL Server调优系列玩转篇三(利用索引提示(Hint)引导语句最大优化运行)
前言 本篇继续玩转模块的内容,关于索引在SQL Server的位置无须多言,本篇将分析如何利用Hint引导语句充分利用索引进行运行,同样,还是希望扎实掌握前面一系列的内容,才进入本模块的内容分析. 闲 ...
- Linux服务器下nginx的安全配置
1.一些常识 linux下,要读取一个文件,首先需要具有对文件所在文件夹的执行权限,然后需要对文件的读取权限. php文件的执行不需要文件的执行权限,只需要nginx和php-fpm运行账户的读取权限 ...
- python scrapy+Mongodb爬取蜻蜓FM,酷我及懒人听书
1.初衷:想在网上批量下载点听书.脱口秀之类,资源匮乏,大家可以一试 2.技术:wireshark scrapy jsonMonogoDB 3.思路:wireshark分析移动APP返回的各种连接分类 ...
- Java api 入门教程 之 JAVA的SYSTEM类
System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...
- 怎么使PUTTY一直连接
如何才能保证PUTTY一直连接,即使我们好长时间不去敲命令,也让它一直连接着? PuTTY的设置方法是:在Connection里面有个Seconds between keepaliaves.这里就是每 ...