18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

一个信息滚动实例

2019-12-17 分享
在网站首页经常有信息滚动的需求,尤其是物流公司类的网站,需要加上个滚动物流信息的框,今天带来个信息滚动的实例分享。

先上效果图


内容

<div id="box">
	<ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">
	    <li><a href="#">滚动信息一</li>	
	    <li><a href="#">滚动信息二</li>
	    <li><a href="#">滚动信息三</li>
	    <li><a href="#">滚动信息四</li>
	    <li><a href="#">滚动信息五</li>
	    <li><a href="#">滚动信息六</li>
	    <li><a href="#">滚动信息七</li>
	</ul>
	<ul id="con2"></ul>
</div>

样式

大框根据需要,有必要加个定位。

#box {
	width: 260px;
	height: 100px;
	margin: 0 auto;
	border: 2px solid red;
	overflow: auto
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
	overflow: hidden
}

ul li {
	height: 24px;
	line-height: 24px;
	padding-left: 10px;
}

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	color: #f00
}

JS部分

<script type="text/javascript">
	var box = document.getElementById("box");
	var con1 = document.getElementById("con1");
	var con2 = document.getElementById("con2");
	var s = document.getElementsByTagName("a");
	var speed = 50;
	con2.innerHTML = con1.innerHTML;

	function ScrollUp() {
		if(box.scrollTop >= con1.scrollHeight) {
			box.scrollTop = 0;
		} else
			box.scrollTop++;
	}
	var i = setInterval("ScrollUp()", speed);

	function Stop() {
		clearInterval(i);
	}

	function Up() {
		i = setInterval("ScrollUp()", speed);
	}
</script>
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图