关闭

js文字循环滚动

标签: javascriptweb前端实例
331人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:133740次
    • 积分:2405
    • 等级:
    • 排名:第17028名
    • 原创:102篇
    • 转载:6篇
    • 译文:0篇
    • 评论:15条
    最新评论