HTML+JS（jQuery）无缝衔接滚动，鼠标移入开始移出停止

扎心小指针0

已于 2022-11-17 16:56:47 修改

阅读量954

点赞数 1

分类专栏：前端开发文章标签： javascript html 前端

于 2022-09-22 09:04:24 首次发布

本文链接：https://blog.csdn.net/weixin_63381305/article/details/126984942

版权

前端开发专栏收录该内容

18 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript"src="jquery.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 300px;
			margin: 100px auto;
		}
		ul li,ul .nav{
			list-style: none;
		}
		div{
			padding: 10px;
			border: 1px solid #ccc;
			height: 140px;
			overflow: hidden;
		}
		div h3{
			padding: 10px;
		}
		div li{
			text-indent: 20px;
		}
	</style>
</head>
<body>
	<div>
		<ul class="nav">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			
		</ul>
	</div>
	<script type="text/javascript">
		var nav2=$(".nav").html();
		$(".nav").append(nav2);
		var sh =$("ul li").eq(0).offset().top;
		var dh =$("ul li").eq(9).offset().top;
		var h=dh-sh;
		var i=0;
		var myTimer;
		var d;
		// var myTimer=setInterval(function(){
		// 	var d=$("ul").offset().top-2;
		// 	i++;
		// 	if(i*2<h){
		// 		$("ul").offset({
		// 			top:d
		// 		})
		// 	}else{
		// 		$("ul").offset({
		// 			top:sh
		// 		})
		// 		i=0;
		// 	}
		// },100)
		$("div").mouseover(function(){
			myTimer=setInterval(function(){
			d=$("ul").offset().top-2;
			i++;
			if(i*2<h){
				$("ul").offset({
					top:d
				})
			}else{
				$("ul").offset({
					top:sh
				})
				i=0;
			}
		},100)
		})
		$("div").mouseout(function(){
			clearInterval(myTimer);
		})
	</script>
</body>
</html>