JQ定时器复-- 不懂--感觉没多大用处

最新推荐文章于 2022-03-31 13:48:37 发布

li3196672779

最新推荐文章于 2022-03-31 13:48:37 发布

阅读量633

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的滚动文字效果案例。该案例通过设置定时器使文字块在限定区域内循环滚动，并在鼠标悬停时暂停滚动。案例中包含四个相同的文字模块，每个模块都有相同的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 500px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: blue;
				border: 2px solid red;
				margin: 0px auto;
				margin-top: 100px;
				color: yellow;
				position: relative;
				overflow: hidden;
			}
			.hezi{
				height:200px;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
			}
			h1{
				height: 50px;
			}
		</style>
		
		<script type="text/javascript">
			$(function(){

				
				
//				循环每个box元素
				$('.box').each(function(){
					
//					获得js的原生对象
					var jsthis = $(this)[0];
//					为了防止this的指向发生变化我们将他存到一个变量里
					var jqthis = $(this);
//					设置变量
//					相当于向每个box对象添加一个属性
					jsthis.n = 0;
					
					jsthis.run = function(){
//						将每个js里n这个属性自增
						jsthis.n++;
//						判断界限
						if(jsthis.n==4){
//							让瞬间跳到0这个位置
							jqthis.find('.hezi').css({'top':'0px'});
							
							jsthis.n=1;
						}
						
						jqthis.find('.hezi').stop().animate({'top':-50*jsthis.n+'px'})
						
					}
					
					jsthis.timer = setInterval(jsthis.run,1000)
					
					
				})
				
//				给box添加hover事件
				$('.box').hover(function(){
//					获得当前移入box原生js对象
					var jsthis = $(this)[0];
//					清理定时器
					clearInterval(jsthis.timer);
					
				},function(){
//					获得当前移入box原生js对象
					var jsthis = $(this)[0];
//					恢复定时器
					jsthis.timer = setInterval(jsthis.run,1000)
					
				})
				
				
							
			})
		</script>
	</head>
	<body>
		<div class="box">
			<div class="hezi">
				<h1>今天的天气很好</h1>
				<h1>贾老师心情很好</h1>
				<h1>贾老师想罚苏启海做俯卧撑</h1>
				<h1>今天的天气很好</h1>
			</div>
			
		</div>
		
		<div class="box">
			<div class="hezi">
				<h1>今天的天气很好</h1>
				<h1>贾老师心情很好</h1>
				<h1>贾老师想罚苏启海做俯卧撑</h1>
				<h1>今天的天气很好</h1>
			</div>
			
		</div>
		
		<div class="box">
			<div class="hezi">
				<h1>今天的天气很好</h1>
				<h1>贾老师心情很好</h1>
				<h1>贾老师想罚苏启海做俯卧撑</h1>
				<h1>今天的天气很好</h1>
			</div>
			
		</div>
		
		<div class="box">
			<div class="hezi">
				<h1>今天的天气很好</h1>
				<h1>贾老师心情很好</h1>
				<h1>贾老师想罚苏启海做俯卧撑</h1>
				<h1>今天的天气很好</h1>
			</div>
			
		</div>
	</body>
</html>