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 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- 【代码笔记】iOS-伸缩式动画
一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...
- Android按键事件处理流程 -- KeyEvent
刚接触Android开发的时候,对touch.key事件的处理总是一知半解,一会是Activity里的方法,一会是各种View 中的,自己始终不清楚到底哪个在先哪个在后,总之对整个处理流程没能很好的把 ...
- activiti和SSH项目做整合
最近因公司的业务需求,需要使用工作流来做我们业务中的流程审批工作,so 就安排我做了这个工作,发现整合的时候有一些问题,及时的记录下来分享给大家. 介绍: 一.如果你的web项目只是单纯的web项目那 ...
- 《Hey程序员 你适合加入创业公司吗?》再补充
笔者经过多年的走访发现,不是所有优秀的程序员都能在创业公司如鱼得水.根据笔者的经验,具备下面几点优秀品质的程序员会更容易适应创业公司的环境. 1.娴熟的调试技巧可以说,程序员的大部分时间都花在调试程序 ...
- 项目管理学习笔记之五.沟通协调能力I
项目管理个人能力培养--沟通协调能力在项目管理当中,怎么样把握好沟通?它有些什么的基本原则?是我们本章要讨论的. 一.电影<大腕>中的四段对话 冯小刚的电影<大腕>中有四段精神 ...
- [CMD]oracle数据库的导出导入
除了推荐使用PL/SQL Developer 工具对oracle进行导出导入(http://www.cnblogs.com/whylaughing/p/5983490.html )之外,比较常用的还有 ...
- 网络编程3--毕向东java基础教程视频学习笔记
Day24 01 TCP上传图片02 客户端并发上传图片03 客户端并发登录04 浏览器客户端-自定义服务端05 浏览器客户端-Tomcat服务端 01 TCP上传图片 import java.net ...
- 【JSP】JSP基础学习记录(四)—— Servlet
序: 众所周知JSP的基础也就是Servlet,如果单纯用Servlet类来响应用户的HTTP请求可以吗?答案是肯定的.JSP中的9个内置对象只是自动帮我们初始化的,没有他们一样可以实现web.只是工 ...
- 0015 Java学习笔记-集合-TreeMap集合
主要的方法 构造方法: TreeMap(); TreeMap(Comparator<?super K> comparator); TreeMap(Map<? extends K,? ...
- Java api 入门教程 之 JAVA的SYSTEM类
System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...