文字横向滚动效果

最新推荐文章于 2024-04-06 05:34:00 发布

佥易爸爸

最新推荐文章于 2024-04-06 05:34:00 发布

阅读量3.2k

点赞数

分类专栏： js

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<style> 
/*My Marquee CSS Start*/ 
.my_marquee_info{width:200px;border:#987654 solid 1px;padding:20px 3px 3px 2px;margin-top:30px;} 
.my_marquee_main{width:200px;height:160px;border:#234567 solid 1px;padding:2px 3px 3px 2px;overflow:hidden;} 
.my_marquee_div1{width:195px;border:Green solid 1px;} 
.my_marquee_div2{width:195px;border:Red solid 1px;} 
/*My Marquee CSS End*/ 
</style>
<div id="demo" style="overflow:hidden;height:50px;width:400px; font-size: 12px;align:right;color: #c50800;margin-top:2px;">
                    <div id="demo1">
			<table border="0" cellpadding="0"> 
				<tr style="background-color:green;"> 
					<td><p style="width:400px;">训练场地</p></td> 
					<td><p style="width:400px;">休闲茶吧</p></td> 
					<td><p style="width:400px;">会所简介</p></td> 
					<td><p style="width:400px;">室内赛场</p></td> 
					<td><p style="width:400px;">牧马场</p></td> 
					<td id="demo2" valign="top"></td>							
				</tr> 
			</table> 
		   </div>
</div>
<div class="my_marquee_info" id="my_marquee_info"></div> 
<script language="JavaScript" type="text/javascript">
	  //滚动速度 数值越大，滚动速度越慢。
	  var speed = 20;
	  //滚动区域
	  document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
	  //实现滚动的方法
	  function Marquee(){ 
		if(document.getElementById('demo2').offsetWidth-document.getElementById('demo').scrollLeft<=0) 
			document.getElementById('demo').scrollLeft-=document.getElementById('demo1').offsetWidth; 
		else{ 
			document.getElementById('demo').scrollLeft++;	
		} 
		document.getElementById('my_marquee_info').innerHTML=''; 
		document.getElementById('my_marquee_info').innerHTML+='div.scrollTop:'+document.getElementById('demo').scrollLeft; 
	 } 
	  var MyMar = setInterval(Marquee,speed);
	  document.getElementById("demo").onmouseover = function() {clearInterval(MyMar)};
	  document.getElementById("demo").onmouseout  = function() {MyMar=setInterval(Marquee,speed)};
</script>