单行文字向上无间断的滚动

单行文字向上滚动,这里我主要是用了无逢滚动的原理:通过改变top值,让文字让上移动,需要一个定时器

	var oNav=document.getElementById(‘nav‘);
			var oUl=oNav.getElementsByTagName(‘ul‘)[0];
			var aLi=oUl.children;
			var timer=null;
			var speed=-1;

			oUl.innerHTML+=oUl.innerHTML;
			oUl.style.height=aLi[0].offsetHeight*aLi.length+‘px‘;

			timer=setInterval(function(){
				var t=oUl.offsetTop;
				t+=speed;

				if(t<=-oUl.offsetHeight/2){
					t=0;
				};

				oUl.style.top=t+‘px‘;

			},30);
	}
    <div class="nav" id="nav">
        <ul>
            <li><a href="#">测试1111111111111111111111111</a></li>
            <li><a href="#">222222222222222222222222222</a></li>
            <li><a href="#">33333333333333333333333333333</a></li>
            <li><a href="#">44444444444444444444</a></li>
            <li><a href="#">555555555555555555555</a></li>
            <li><a href="#">6666666666666666666666</a></li>
            <li><a href="#">777777777777777777777777777</a></li>
        </ul>

    </div>
.nav{width:300px; height:35px;line-height: 35px; border:1px solid #ccc;margin:100px auto; position: relative; overflow: hidden;}
.nav ul{  position: absolute;left:0;top:0;}
.nav ul li{height:35px;  list-style: none;}
.nav ul li a{ text-decoration: none;}

样式写的不太好看

  

时间: 2024-10-31 12:43:39

单行文字向上无间断的滚动的相关文章

IOS实现文字水平无间断滚动

IOS实现文字水平无间断滚动 IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer *timer; UIScrollView *scrollViewText; } @property (nonatomic ,strong) NSArray *arrData; @end ViewController.m

IOS跑马灯效果,实现文字水平无间断滚动

ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController{ 4 NSTimer *timer; 5 UIScrollView *scrollViewText; 6 } 7 8 @property (nonatomic ,strong) NSArray *arrData; 9 10 11 @end ViewController.m 1 // 2 // ViewContro

js实现文字无间断左右滚动和图片左右滚动

var MyMar=setInterval(Marquee,speed); scroll_div.onmouseover=function() {clearInterval(MyMar);} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} } </script> <div id="gongao"> <div style="width:900px;height

jQuery插件--图片文字向上向左循环滚动

需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class="box scroll_two"> <ul> <li><a href="#">声明</a>| <a href="#">农夫山泉关于公益捐赠的严正声明</a></li> &

JS图片无间断滚动代码合集

JavaScript图片滚动代码合集,向上下左右四个方向的无缝滚动代码,前端设计开发时所能用的一个图片特效,你可只用其中的一种滚动.前端框架分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1

无间断滚动的新闻文章列表

<!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

javascript -- (无间断滚动图片)

无间断滚动图片 --原理(定时器 每隔.1秒调用一次滚动的函数) /***body**/ <div id="wrap"> <div id="box"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg

文字向上滚动代码,带段落停顿

带段落停顿效果的文字向上滚动代码,一个比较早的代码了,但觉得现在仍很常用,它可以定义文字成批次(段落)向上滚动,滚动后停顿,然后继续滚动,很不错啦,希望大家也喜欢. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>接触角测定仪</title> </head> &l

JavaScript js无间断滚动效果 scrollLeft方法 使用模板

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> 无间断滚动scrollLeft套用模板 </title> <meta name="Keywords" content=""> <meta name="Description" content=""