文字滚动代码,JS代码库,德仔网

代码语言

代码分类

【JS】文字滚动

作者:Jovenlu / 发布于2013/10/23/ 382


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	 <head>
	 <title>文字滚动</title>
	 <meta charset="utf-8"/>
	 <style type="text/css">
	 .marquee {
	 position: relative;
	 width: 490px;
	 height: 70px;
	 overflow: hidden;
	 border: 10px solid #369;
	 }
	
	 .marquee img {
	 display: block;
	 }
	
	 .marquee dd {
	 margin: 0px;
	 padding: 0px;
	 }
	 </style>
	 <script type="text/javascript">
	 var Marquee = function(id){
	 var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = 100;
	 clone.innerHTML = original.innerHTML;
	 var rolling = function(){
	 if (container.scrollTop == clone.offsetTop) {
	 container.scrollTop = 0;
	 }
	 else {
	 container.scrollTop++;
	 }
	 }
	 var timer = setInterval(rolling, speed)//设置定时器
	 container.onmouseover = function(){
	 clearInterval(timer)
	 }//鼠标移到marquee上时，清除定时器，停止滚动
	 container.onmouseout = function(){
	 timer = setInterval(rolling, speed)
	 }//鼠标移开时重设定时器
	 }
	 window.onload = function(){
	 Marquee("marquee");
	 }
	 </script>
	 </head>
	 <body>
	 <dl id="marquee" class="marquee">
	 <dt>
	 源码爱好者提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码。</dt>
	 <dd>
	 </dd>
	 </dl>
	 </body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　滚动　

同语言下

可能有用的

Jovenlu贡献的其它代码(1)

.文字滚动