自动滚动列表效果实现-优快云博客

本文介绍了一种使用JavaScript和HTML实现自动滚动效果的方法。通过定时器控制列表项的margin-top属性，达到无缝滚动的效果，并在鼠标悬停时停止滚动。

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

文字自动滚动效果

	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link href="css/global.css" rel="stylesheet" type="text/css" />
	<link href="css/detail.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
	* {
	}
	</style>
	</head>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
	$(function () { var off = false;

	setInterval(function () {

	if (off) {

	} else {
	gaibian();
	}

	}, 1800);

	$("#price").mouseover(function () {
	off = true;

	}).
	mouseout(function () {
	off = false;


	});

	});
	function gaibian() {
	var top = $("li").eq(0).css("margin-top").replace("px", "");
	top--;
	$("li").eq(0).css("margin-top", top + "px");

	if ($("li").eq(0).css("height").replace("px","")) {
	$("li").eq(0).css("margin-top", "0px");
	var li = $("li").eq(0);
	$("ul").append(li);
	}

	};
	</script>
	<body>
	<div id="side" style="width: 240px;">
	<div id="price">
	<ul>
	<li>金汉斯  <a href="#">进行中</a></li>
	<li>兰蔻升级版小黑瓶   <a href="#">进行中</a></li>
	<li>苹果 iPhone 5s  <a href="#">进行中</a></li>
	<li>HTC One max  <a href="#">进行中</a> </li>
	<li>三星最新平板电  <a href="#">进行中</a></li>
	<li>苹果 iPad Air  <a href="#">进行中</a></li>
	</ul>
	</div>
	</div>
	</body>
	</html>