js文字循环滚动

最新推荐文章于 2024-07-16 17:26:59 发布
最新推荐文章于 2024-07-16 17:26:59 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： javascript 文章标签： javascript web前端 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziwoods/article/details/51543067
版权

利用原生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+".οnmοuseοver=new Function('stopscroll"+_S1+"=true');scrollElem"+_S1+".οnmοuseοut=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>
效果图如下：



包子源
关注
专栏目录
文字无缝循环滚动js代码（放到body中直接可以使用）
01-23
文字无缝循环滚动js代码（放到body中直接可以使用） 想把table中的内容做成滚动效果，尝试了很多代码，有的都只循环了一次就停了。这个代码就会一直循环，而且无缝，解释也非常详细。希望对大家有帮助！
javascript实现状态栏文字首尾相接循环滚动的方法
10-23
状态栏文字首尾相接循环滚动是一种常见的网页效果，它可以使网页状态栏上的文字像跑马灯一样连续不断地滚动。这种效果可以通过JavaScript实现，下面将详细介绍实现这一效果的原理和具体方法。 首先，要理解...
原生js实现一个文字列表轮播（带停顿）
weixin_49531204的博客
02-17 661
原生js实现一个文字列表轮播（带停顿）
js实现无限滚动加载数据
最新发布
lbking666666的专栏
07-16 1018
entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。
文字自动循环滚动 的js 函数
lingxyd 的专栏
07-29 3250
/********************************//*  文字自动循环滚动  *//*  IE6 FF1.0.4    *//*  不支持xhtml声明的文档 *//********************************///*********不要修改这部分***************//scrollBodyId: String 内部滚动div的id//scrol
js实现图片滚动
学习的约束力，提醒自己
03-23 3164
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) 源码爱好者收集 codefans.netvar speed=30;var colee2=document.getElementById("colee2");var cole
原生js实现文字循环向上滚动效果
m0_55980258的博客
02-21 909
原生js实现文字循环向上滚动效果
用JavaScript制作连续滚动的字幕
ξσ Dicky's Blog σξ
03-12 1747
代码如下： 链接1 链接2 链接3 链接4 <!--marqueesHeight=200; //内容区高度stopscroll=false; //这个变量控制是否停止滚动with(marquees){noWrap=true; //这句表内容区不自动换行style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大style
JS实现的文字间歇循环滚动效果完整示例
10-18
标题“JS实现的文字间歇循环滚动效果完整示例”表明文章重点在于使用JavaScript（JS）来实现一个文字在页面上自动进行间歇性、循环滚动的动态效果。描述中提到的关键技术包括JavaScript的时间函数、定时触发机制和...
JS实现div内部的文字或图片自动循环滚动代码
10-27
在本示例中，我们将详细探讨如何使用JS来实现div内部的文字或图片的自动循环滚动。 首先，我们创建了一个CSS样式，定义了两个类：`.content` 和 `dl`。`.content` 是包含滚动内容的div，设置了宽度、高度、位置以及...
jQuery新闻列表文字循环滚动代码
07-31
"jQuery新闻列表文字循环滚动代码" 是一种实现这种效果的技术方案，它能帮助开发者创建一个新闻列表，其中的文字会以循环滚动的方式展现，给用户带来动态的阅读体验。 jQuery 是一个流行的JavaScript库，它简化了...
js实现文字内容无缝滚动动画效果
06-20
js实现文字内容无缝循环滚动动画效果，效果显示 http://t.harjes.cn/wfgd/ 使用方法简单，希望对有需要的人有帮助
css+js滚动字幕
04-17
html css+纯js实现无缝连接循环的滚动字幕，内有注释
使用JavaScript实现连续滚动字幕效果的方法
10-23
主要介绍了使用JavaScript实现连续滚动字幕效果的方法,文中给出了浏览器端运行的示例脚本,需要的朋友可以参考下
水平滚动字幕循环滚动
08-20
水平滚动字幕循环滚动
基于JS的文章按行向上滚动,鼠标经过时停止（间接性）
08-17
使用js来控制的单行文字不断向上滚动,无间隙，当鼠标点击时，就自动停止滚动，适合公告以及信息公示使用
JS实现文字向上循环滚动
m0_55918015的博客
01-18 1689
JS实现文字向上循环滚动
js文字循环滚动效果
12-29 3599
http://www.zzjs.net/html/1424.html
js文字循环滚动代码,javascript循环语句
2301_79533350的博客
11-02 340
大家好，小编为大家解答js文字循环滚动代码的问题。很多人还不知道javascript循环语句，现在让我们一起来看看吧！
js文字左右循环滚动
05-31
您可以使用CSS的animation属性和@keyframes规则来实现左右循环滚动文字的效果。以下是一个简单的示例代码： HTML： ``` <div class="scroll-text"> <p>这是一段需要滚动的文字。</p> </div> ``` CSS： ``` .scroll-text { overflow: hidden; } .scroll-text p { white-space: nowrap; animation: scroll-left 5s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } ``` 这个示例中，我们使用了CSS的transform属性来实现左右滚动效果，通过@keyframes规则来定义动画的开始和结束状态。在这里我们将文字向左移动了100%的宽度，然后循环滚动。您可以根据需要调整动画的速度和延迟等参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值