js实现文字定时上下滚动效果

最新推荐文章于 2020-06-28 10:51:55 发布

ltx851201

最新推荐文章于 2020-06-28 10:51:55 发布

阅读量2.5k

点赞数

分类专栏： JS 文章标签： function scroll xhtml object class border

本文链接：https://blog.csdn.net/ltx851201/article/details/7028071

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"	content="文字定时上下滚动效果" />
<title>兼容多种浏览器的文字定时上下滚动效果</title>
<style type="text/css">
.cls_container {
	border: 1px solid #ccc;
	width: 380px;
	font-size: 12px;
	height: 24px;
	overflow: hidden;
}
.cls_container ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-left: 32px;
}

.cls_container ul li {
	height: 24px;
	line-height: 24px;
	width: 320px;
	float: left;
	display: inline;
}
</style>
</head>
<body>
	<div id="myscroll" class="cls_container">
		<ul>
			<li><a href="http://www.sina.com/">LI文字效果1</a></li>
			<li><a href="http://www.sina.com/">LI文字效果2</a></li>
			<li><a href="http://www.sina.com/">LI文字效果3</a></li>
			<li><a href="http://www.sina.com/">LI文字效果4</a></li>
			<li><a href="http://www.sina.com/">LI文字效果5</a></li>
			<li><a href="http://www.sina.com/">LI文字效果6 </a></li>
			<li><a href="http://www.sina.com/">LI文字效果7</a></li>
			<li><a href="http://www.sina.com/">LI文字效果8</a></li>
			<li><a href="http://www.sina.com/">LI文字效果9</a></li>
			<li><a href="http://www.sina.com/">LI文字效果10</a></li>
			<li><a href="http://www.sina.com/">LI文字效果11</a></li>
		</ul>
	</div>
	
	<script type="text/javascript">
	function $(element){
		if(arguments.length>1){//如果有多个目标对象，则循环将所有目标对象都存于elements数组当中
			for(var i=0,length=arguments.length,elements=[];i<length;i++){
			   elements.push($(arguments[i]));
			}
			return elements;
		}
		
		if(typeof element=="string"){//如果是一个目标ID，则取对应的dom对象
			return document.getElementById(element);
		}else{//如果是一个dom对象，直接返回
			return element;
		}
	}
	
	var Class={
		create:function(){
			return function(){
			   this.initialize.apply(this,arguments);
			}
		}
	}
	Function.prototype.bind=function(object){
		var method=this;
		return function(){
			method.apply(object,arguments);
		}
	}
	var Scroll=Class.create();
	Scroll.prototype={
		initialize:function(element,height){
			this.element=$(element);
			this.element.innerHTML+=this.element.innerHTML;
			this.height=height;
			this.maxHeight=this.element.scrollHeight/2;
			this.counter=0;
			this.scroll();
			this.timer="";
			this.element.οnmοuseοver=this.stop.bind(this);
			this.element.οnmοuseοut=function(){
				this.timer=setTimeout(this.scroll.bind(this),1000);
			}.bind(this);
		},
		scroll:function(){
			if(this.element.scrollTop<this.maxHeight){
			   this.element.scrollTop++;
			   this.counter++;
			}else{
			   this.element.scrollTop=0;
			   this.counter=0;
			}
			if(this.counter<this.height){
			   this.timer=setTimeout(this.scroll.bind(this),20);
			}else{
			   this.counter=0;
			   this.timer=setTimeout(this.scroll.bind(this),3000);
			}
		},
		stop:function(){
			clearTimeout(this.timer);
		}
	}
	//调用函数进行文字滚动效果
	new Scroll("myscroll",24);
	</script>
</body>
</html>

ltx851201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js实现文字定时上下滚动效果

兼容多种浏览器的文字定时上下滚动效果.cls_container { border: 1px solid #ccc; width: 380px; font-size: 12px; height: 24px; overflow: hidden;}.cls_container ul { list-style-type: none; margin: 0;
复制链接

扫一扫