JavaScript实现文字列表无缝向上滚动

最新推荐文章于 2024-08-09 14:39:44 发布

夜空中苦逼的程序员

最新推荐文章于 2024-08-09 14:39:44 发布

阅读量4.2k

点赞数 1

分类专栏：【Javascript】

本文链接：https://blog.csdn.net/chenghui0317/article/details/8170001

版权

【Javascript】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本人声明。否则将追究法律责任。
作者：永恒の_☆ 地址： http://blog.csdn.net/chenghui0317/article/details/8170001

文字列表无缝向上滚动代码：

<!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=gb2312" />
<title>JavaScript实现文字列表无缝向上滚动</title>
<style>
/*全局设置*/
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px;}
#marquee{overflow:hidden;height:100px;width:280px; margin:50px auto;}
#marquee1{height:auto;}
#marquee1 li{height:22px;}
#marquee2{height:auto;}
#marquee2 li{height:22px;}
#result{width:300px;margin:10px auto;}
</style>
</head>
<body>
<!-- 其实实现原理很简单，marquee1 和marquee2  innerHTML 是一样的嘛 ，假如marquee的scrollTop++ ,那么只有marquee在往下移。恰好超过的部分隐藏，就感觉marquee没有动，而是marquee1和marquee2他们向上移动，但是实际上他们从来没有变过，关键就在于当marquee 的顶部已经到达marquee1 的底部的时候，立马将marquee的scrollTop位置还原成初始状态，这样子就感觉 两个div一直在滚个不停 -->
<div id="marquee">
	<div id="marquee1">
	  <ul>
		  <li><a href="http://bbs.csdn.net/topics/390219560" style="color: red; font-weight: bold" target="_blank">微软大会2012购票享7折优惠</a></li>
		  <li><a href="http://bbs.csdn.net/topics/390270707" style="color: black" target="_blank">微软Silverlight 5开发书籍汇总</a></li>
		  <li><a href="http://bbs.csdn.net/topics/390269709" style="color: black" target="_blank">实现.Net代码生成器讨论帖</a></li>
		  <li><a href="http://bbs.csdn.net/topics/390262160" style="color: black" target="_blank">探讨查看SQL变更记录的方法</a></li>
		  <li><a href="http://www.csdn.net/article/2012-11-06/2811553" style="color: red; font-weight: bold" target="_blank">魏子钧：HTML5和JavaScript将长存</a></li>
		  <li><a href="http://bbs.csdn.net/topics/390272755" style="color: blue; font-weight: bold" target="_blank">Hadoop&BigData 技术赢门票活动</a></li>
		  <li><a href="http://hbtc2012.hadooper.cn" style="color: red; font-weight: bold" target="_blank">Hadoop与大数据精彩议题发布</a></li>
		  <li><a href="http://bbs.csdn.net/topics/390230868" style="color: blue; font-weight: bold" target="_blank">Cloud Foundry征文大赛进行中</a></li>
	  </ul>
	</div>
<div id="marquee2"></div>
</div> 
<div id="result"></div>
<script>
	var browser=navigator.appName;
	var b_version=navigator.appVersion;
	var version=b_version.split(";");
	var trim_Version=version[1].replace(/[ ]/g,"");
	var speed=10; 
	var marquee = document.getElementById("marquee"); 
	var marquee1 = document.getElementById("marquee1"); 
	var marquee2 = document.getElementById("marquee2"); 

	marquee2.innerHTML = marquee1.innerHTML; 
	function marqueeImpl(){
		document.getElementById("result").innerHTML = "marquee2.offsetTop: " + marquee2.offsetTop +" marquee.scrollTop:"+marquee.scrollTop;
		//之后发现，这种方式不兼容所有的浏览器，比如ie6 ie7 和搜狗，他们获取的offsetTop 参照物不是父级容器，而是浏览器最外层 ，所以需要额外判断浏览器是ie6 ie7还是搜狗。
		if(navigator.userAgent.toLowerCase().indexOf("metasr")!=-1 || (browser=="Microsoft Internet Explorer" && (trim_Version=="MSIE7.0" || trim_Version=="MSIE6.0"))){	
			if(marquee2.offsetTop - marquee.scrollTop <= 0) {
				marquee.scrollTop -= marquee1.offsetHeight;
			}else{ 
				marquee.scrollTop++;
			} 
		}else{
			if(marquee2.offsetTop - marquee.offsetTop - marquee.scrollTop <= 0) {
				marquee.scrollTop -= marquee1.offsetHeight;
			}else{ 
				marquee.scrollTop++;
			} 
		}
	}
	
	var marqueeVal = setInterval(marqueeImpl, speed);
	marquee.onmouseover = function() {
		clearInterval(marqueeVal);
	} 
	marquee.onmouseout = function() {
		marqueeVal = setInterval(marqueeImpl, speed);
	} 
</script> 
</body>
</html>

文字列表无缝横向滚动代码：

<!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=gb2312" />  
    <title>JavaScript实现文字列表无缝向上滚动</title>  
    <style>  
    /*全局设置*/  
    *{margin:0px;padding:0px;border:0px;}  
    body{font-size:12px;}  
    #marquee{overflow:hidden;height:100px;width:280px; margin:50px auto;}  
    #marquee1{height:auto;}  
    #marquee1 li{height:22px;}  
    #marquee2{height:auto;}  
    #marquee2 li{height:22px;}  
    #result{width:300px;margin:10px auto;}
    </style>  
    </head>  
    <body>  
    <!-- 其实实现原理很简单，marquee1 和marquee2  innerHTML 是一样的嘛 ，假如marquee的scrollTop++ ,那么只有marquee在往下移。恰好超过的部分隐藏，就感觉marquee没有动，而是marquee1和marquee2他们向上移动，但是实际上他们从来没有变过，关键就在于当marquee 的顶部已经到达marquee1 的底部的时候，立马将marquee的scrollTop位置还原成初始状态，这样子就感觉 两个div一直在滚个不停 -->  
    <div id="marquee">  
        <div id="marquee1">  
          <ul>  
              <li><a href="#" >微软大会2012购票享7折优惠</a></li>  
              <li><a href="#" >微软Silverlight 5开发书籍汇总</a></li>  
              <li><a href="#" >实现.Net代码生成器讨论帖</a></li>  
              <li><a href="#" >探讨查看SQL变更记录的方法</a></li>  
              <li><a href="#" >魏子钧：HTML5和JavaScript将长存</a></li>  
              <li><a href="#" >Hadoop&BigData 技术赢门票活动</a></li>  
              <li><a href="#" >Hadoop与大数据精彩议题发布</a></li>  
              <li><a href="#" >Cloud Foundry征文大赛进行中</a></li>  
          </ul>  
        </div>  
		<div id="marquee2"></div>  
    </div>   
    <div id="result"></div>  
    <script>  
        var speed=100;   
        var marquee = document.getElementById("marquee");   
        var marquee1 = document.getElementById("marquee1");   
        var marquee2 = document.getElementById("marquee2");   
      
        marquee2.innerHTML = marquee1.innerHTML;   
        function marqueeImpl(){  
            document.getElementById("result").innerHTML = "marquee2.offsetTop: " + marquee2.offsetTop +" marquee.scrollTop:"+marquee.scrollTop;  
			if(marquee2.offsetTop - marquee.offsetTop - marquee.scrollTop <= 0) {  
				marquee.scrollTop -= marquee1.offsetHeight;  
			}else{   
				marquee.scrollTop++;  
			}   
        }  
          
        var marqueeVal = setInterval(marqueeImpl, speed);  
        marquee.onmouseover = function() {  
            clearInterval(marqueeVal);  
        }   
        marquee.onmouseout = function() {  
            marqueeVal = setInterval(marqueeImpl, speed);  
        }   
    </script>   
	<!--向左边无缝滚动-->
	<style type="text/css">
		#marquee_1{ overflow:hidden; width:815px;height:30px;}
		#marquee_1 #marquee1_1 {width:200%; height:30px;}
		#marquee_1 ul{float:left; height:30px; }
		#marquee_1 ul li{float:left; line-height:30px;}
		#marquee_1 li a{margin-right:30px;color:#444444;}

	</style>
	<div id="marquee_1">
		<div id="marquee1_1">
		  <ul>
            <li><a href="#" >回收站里的文件删除了怎么恢复</a></li>
			<li><a href="#" >c盘哪些文件可以删除 系统就越来越慢怎么办</a></li>
			<li><a href="#" >电脑输入法切换不了怎么办</a></li>
			<li><a href="#" >PC是什么意思 </a></li>
			<li><a href="#" >注册表怎么打开 电脑注册表在哪里打开</a></li>
			<li><a href="#" >什么浏览器速度最快 什么浏览器最安全</a></li>
			<li><a href="#" >1m等于多少kb 1MB等于多少KB</a></li>
			<li><a href="#" >ppap.exe是什么进程</a></li>
      </ul>
    </div>
    <div id="marquee2_1"></div>
  </div>
	<script type="text/javascript">
		var marquee_1 = document.getElementById("marquee_1");
		var marquee1_1 = document.getElementById("marquee1_1");
		var marquee2_1 = document.getElementById("marquee2_1");
		marquee2_1.innerHTML=document.getElementById("marquee1_1").innerHTML;
		function marqueeImpl_1(){
		if(marquee_1.scrollLeft-marquee2_1.offsetWidth>=0){
		 marquee_1.scrollLeft-=marquee1_1.offsetWidth;
		}
		else{
		 marquee_1.scrollLeft++;
		}
		}
		var marqueeVal_1=setInterval(marqueeImpl_1,speed);
		marquee_1.οnmοuseοver=function(){
			clearInterval(marqueeVal_1);
		}
		marquee_1.οnmοuseοut=function (){
			marqueeVal_1=setInterval(marqueeImpl_1,speed);
		}

	</script>

</body>  
</html>