关闭

js文字循环滚动

标签: javascriptweb前端实例
452人阅读 评论(0) 收藏 举报
分类:

利用原生js实现文字循环滚动,鼠标移入停止滚动,可以自行设置参数

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{font-family: "微软雅黑";}
			body{width: 100%;height: 100%;background-color: #E1E1E1;overflow-x: hidden;}
			#box{width: 98%;height: 600px;background-color: #E1E1E1;margin: 0 auto;}
			
			.boxaa{width: 98%;float: left;height: 320px;border: 1px solid #C6C6C6;margin-left: 1%;margin-top: 1%;background-color: white;}
			.boxatitle{width: 100%;height: 40px;line-height: 40px;background-image: url(title.png);border-bottom:  1px solid #C6C6C6;background-repeat-x: repeat;}
		   
		    .boxaa span{margin-left: 20px;}
		   .boxaa table{font-size: 16px;}
		   .td1,.td2,.td3,.td4,.td5,.td6,.td7{width: 139px;height: 28px;}
		    td{font-size:12px;}
			.titletd td{background-color:#EFEFEF;text-align:center;}
			.datatd td{background-color:#EFEFEF;height:28px;text-align:center;}
			.gundong{width: 1000px;height: auto;margin: 0 auto;margin-top: 20px;}
		</style>
		
	</head>
	<body>
		<div id="box">
			
			<div class="boxaa">
				<div class="boxatitle"><span>文字滚动</span></div>
				<div class="gundong" id="">
				<table border="0" width="100%" cellspacing="0" cellpadding="0">
					  <tr>
					    <td width="100%">
					    <table width="1000px" border="0" cellpadding="0" cellspacing="1">
					        <tr class="titletd">
					            <td nowrap class="td1">aaaaaa</td>
					            <td nowrap class="td2">aaaaaaaa</td>
					            <td nowrap class="td3">aaaaaaaa</td>
					            <td nowrap class="td4">aaaaaaaa</td>
					            <td nowrap class="td5">aaaaaaaa</td>
					            <td nowrap class="td6">aaaaaaaa</td>
					            <td nowrap class="td7">aaaaaaaa</td>
					        </tr>
					    </table>
					    </td>
					  </tr>
					  <tr>
					    <td width="100%">
					    <div id="A1">
					        <div id="A2">
					            <table width="1000px" border="0" cellpadding="0" cellspacing="1" style="margin-top:-1px;">
					                <tbody class="datatd">
					                     <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                    <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                     <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                    <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                     <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                     <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                    <tr>
					                        <td nowrap class="td1">aaaaaaaa</td>
					                        <td nowrap class="td2">aaaaaaaa</td>
					                        <td nowrap class="td3">aaaaaaaa</td>
					                        <td nowrap class="td4">aaaaaaaa</td>
					                        <td nowrap class="td5">aaaaaaaa</td>
					                        <td nowrap class="td6">aaaaaaaa</td>
					                        <td nowrap class="td7">2006-8-25</td>
					                    </tr>
					                </tbody>
					            </table>
					
					        </div>
					    </div>
					    </td>
					  </tr>
					</table>
				</div>
			</div>
		</div>
		<SCRIPT language=JavaScript>
			function _InitScroll(_S1,_S2,_W,_H,_T){
			    return "var marqueesHeight"+_S1+"="+_H+";var stopscroll"+_S1+"=false;var scrollElem"+_S1+"=document.getElementById('"+_S1+"');with(scrollElem"+_S1+"){style.width="+_W+";style.height=marqueesHeight"+_S1+";style.overflow='hidden';noWrap=true;}scrollElem"+_S1+".onmouseover=new Function('stopscroll"+_S1+"=true');scrollElem"+_S1+".onmouseout=new Function('stopscroll"+_S1+"=false');var preTop"+_S1+"=0; var currentTop"+_S1+"=0; var stoptime"+_S1+"=0;var leftElem"+_S2+"=document.getElementById('"+_S2+"');scrollElem"+_S1+".appendChild(leftElem"+_S2+".cloneNode(true));setTimeout('init_srolltext"+_S1+"()',"+_T+");function init_srolltext"+_S1+"(){scrollElem"+_S1+".scrollTop=0;setInterval('scrollUp"+_S1+"()',50);}function scrollUp"+_S1+"(){if(stopscroll"+_S1+"){return;}currentTop"+_S1+"+=1;if(currentTop"+_S1+"==(marqueesHeight"+_S1+"+1)) {stoptime"+_S1+"+=1;currentTop"+_S1+"-=1;if(stoptime"+_S1+"=="+_T/50+") {currentTop"+_S1+"=0;stoptime"+_S1+"=0;}}else{preTop"+_S1+"=scrollElem"+_S1+".scrollTop;scrollElem"+_S1+".scrollTop +=1;if(preTop"+_S1+"==scrollElem"+_S1+".scrollTop){scrollElem"+_S1+".scrollTop=0;scrollElem"+_S1+".scrollTop +=1;}}}";
			}
			
			eval(_InitScroll("A1","A2",1000,29*7,4000));
			
			/*
			A1,A2或B1,B2是滚动内容区域外的两个DIV的ID
			如
			    <div id="B1">
			        <div id="B2">
			_W为滚动内容的宽度
			_H为滚动内容的高度,必须为单元格高度的整数倍,这里每个单元格是19px高
			_T为滚动后每次停留言时间
			
			*/
			
		</SCRIPT>
	</body>
</html>
效果图如下:



1
0
查看评论

文字自动循环滚动js函数

<!-- /********************************/ /* 文字自动循环滚动 */ /* IE6 FF1.0.4 */ /* 不支持xhtml声明的文档 */ /********************************/ //*********...
  • tianqingqingnike
  • tianqingqingnike
  • 2014-10-08 17:56
  • 947

js文字循环滚动效果

http://www.zzjs.net/html/1424.html
  • cwj649956781
  • cwj649956781
  • 2015-12-29 09:40
  • 1975

js实现文字从右滚动到左边代码循环滚动实例

以下是代码实例:<div style="background:#333;"> <div id="tgBigox"> <div id="tgGoox"> ...
  • hj960511
  • hj960511
  • 2016-09-07 13:08
  • 6645

JS实现排行榜文字向上滚动轮播

JS轮播图,JavaScript轮播图,排行榜文字滚动图、文字轮播
  • u012204058
  • u012204058
  • 2017-03-30 20:44
  • 5001

div+js实现首尾相连循环滚动效果

分别用marquee和div+js实现首尾相连循环滚动效果 用DIV+javascript实现首尾相连循环滚动效果(兼容firefox): <img width="77" height="107" alt=""...
  • zhangbest2009
  • zhangbest2009
  • 2012-12-17 19:40
  • 2175

js上下左右无限循环滚动,js上下滚动效果

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) var speed=30; var colee2=document.getElementById("colee2"); var colee1=document.getElementById(&q...
  • boyit0
  • boyit0
  • 2014-11-26 16:10
  • 3356

前端页面实现组件从左向右不间断循环滚动

RT. 我之前写过一个
  • killzero
  • killzero
  • 2014-08-29 11:28
  • 1416

jquery实现文字上下循环滚动效果

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http...
  • Alice9969
  • Alice9969
  • 2017-10-19 10:00
  • 669

原生JavaScript实现手机端循环滚动背景效果

我们常常在一些飞行游戏中见到一些可以循环进行的背景,那么它是怎么实现的呢?自己思考了一下,就写了一个Demo,并且把制作的思路也分享出来,抛砖引玉,如果有朋友有更好的写法,也欢迎向我拍砖,帮助我提高:)
  • codeKMR
  • codeKMR
  • 2016-03-14 14:58
  • 370

使用JS实现图片无限循环左右滚动

使用JS实现图片无限循环左右滚动
  • shuanghusun
  • shuanghusun
  • 2010-07-21 15:51
  • 12057
    个人资料
    • 访问:180416次
    • 积分:2924
    • 等级:
    • 排名:第14333名
    • 原创:110篇
    • 转载:6篇
    • 译文:0篇
    • 评论:23条
    最新评论