jquery无缝间歇向上滚动

 1 $(function(){
 2     var $this = $(".renav");
 3     var scrollTimer;
 4     $this.hover(function(){
 5           clearInterval(scrollTimer);
 6      },function(){
 7        scrollTimer = setInterval(function(){
 8                      scrollNews( $this );
 9                 }, 2000 );
10     }).trigger("mouseout");
11 });
12 function scrollNews(obj){
13    var $self = obj.find("ul:first");
14    var lineHeight = $self.find("li:first").height();
15    $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
16          $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
17    })
18 }

Js Code

 1 <style type="text/css">
 2 .renav{
 3     width:200px;
 4     height:150px;
 5     line-height:21px;
 6     overflow:hidden;
 7     background:#FFFFFF;
 8 }
 9 .renav li{
10     height:21px;
11 }
12 </style>
13 <div class="renav">
14     <ul style="margin-top: 0px;">
15         <li><a>罗氏</a></li>
16         <li><a>瑞声达</a></li>
17         <li><a>未添加1</a></li>
18         <li><a>未添加2</a></li>
19         <li><a>未添加3</a></li>
20         <li><a>未添加4</a></li>
21         <li><a>西门子</a></li>
22         <li><a>欧姆龙</a></li>
23     </ul>
24 </div>

Html Code

时间: 2024-08-29 17:26:06

jquery无缝间歇向上滚动的相关文章

jquery实现文字向上滚动显示效果的简易方法(个人随笔)

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>文字向上滚动</title> <link type="text/css" rel="stylesheet" href="style/style.css"/> <script type="text

jquery实现文字向上滚动效果

html部分 <body> <div id="demo" > <ul id="demo1"> <li>1111111111111111</li> <li>2222222222222222</li> <li>3333333333333333</li> <li>4444444444444444</li> <li>55555555

jquery实现循环向上滚动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动</title> <script type="text/javascript" src="../js/jquery-2.0.0.min.js"></script> <script type="text/javasc

jquery插件之文字间歇自动向上滚动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

jquery插件之文字无缝向上滚动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

简单的jQuery无缝向上滚动效果

html <!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>简单的jQuery无缝向上滚动效果演示1_dowebok</title><style>* { margin: 0; padding: 0;}.myscroll { width: 300px; height: 260px; margin:

vue文字间歇无缝向上滚动

公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁让是人家给你发工资呢!!! 其实,这种用在vue项目中的需求跟原生js的实现方法基本一致,且实现的方法有多种,今天就单拎出来一种实现方法吧: <div class="scroll-up" ref="scroll"> <ul> <li v-f

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚.所以就去了zepto的官网查看其API,却发现如果要使用zepto的swipe()方法,需要引用其已经封装好的touch.js文件,我就赶紧引用了这个js文件,可在实际测试中,官网给出的touch.js文件

jQuery BreakingNews 间歇滚动

BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式——淡入淡出(fade)和向上滑动(slide). 在线实例 实例演示 使用方法 <div class="BreakingNewsController easing" id="breakingnews1">      <div class="bn-titl