Js中关于top、clientTop、scrollTop、offsetTop等

最新推荐文章于 2023-04-07 22:13:37 发布

crazy_fire

最新推荐文章于 2023-04-07 22:13:37 发布

阅读量1.2k

点赞数

分类专栏： jQuery js 文章标签： css function border float

js 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html

一个重要的实例，选摘处忘记了

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>picture auto scroll</title>
</head>
<style type="text/css">
<!--
body {
	text-align: center;
	margin: 0 auto;
}

TD {
	FONT-SIZE: 12px;
}

ul,li,img {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

ul {
	width: 168px;
	margin: 0 auto;
}

ul li {
	width: 49.8%;
	float: left;
	padding: 4px 0;
}

ul li img {
	width: 66px;
	height: 23px;
}
</style>
</head>
<body>
	<div style="margin: 5px; padding: 3px;">
	</div>
	<div id=link_logo
		style="OVERFLOW: hidden; margin: 0 auto; WIDTH: 160px; HEIGHT: 235px">
		<div id=link_logo1 style="OVERFLOW: hidden">

			<ul>
				<li><a href="#" target=_blank><img
						src="images/1.gif" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/2.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/3.gif" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/4.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/5.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/6.gif" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/7.gif" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/8.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/9.gif" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/10.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/11.gif" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/12.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/13.gif" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/14.jpg" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/15.jpg" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/16.jpg" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/17.jpg" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/18.gif" /></a></li>
				<li><a href="#" target=_blank><img
						src="images/19.gif" alt="CSS" /></a></li>
				<li><a href="#" target=_blank><img
						alt="CSS" src="images/20.gif" /></a></li>
			</ul>
		</div>
		<div id=link_logo2></div>
	</div>
	<script>
		var speed = 65
		link_logo2.innerHTML = link_logo1.innerHTML
		function Marquee2() {
			if (link_logo2.offsetTop - link_logo.scrollTop <= 0)
				link_logo.scrollTop -= link_logo1.offsetHeight
			else {
				link_logo.scrollTop++
			}
		}
		var MyMar2 = setInterval(Marquee2, speed)
		link_logo.onmouseover = function() {
			clearInterval(MyMar2)
		}
		link_logo.onmouseout = function() {
			MyMar2 = setInterval(Marquee2, speed)
		}
	</script>
	<br>
	<br>
	<br>

	<br>
</body>
</html>

crazy_fire

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Js中关于top、clientTop、scrollTop、offsetTop等

http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html一个重要的实例，选摘处忘记了picture auto scroll<!--body { text-align: center; margin: 0 auto;}TD { FONT-SIZE: 12px;
复制链接

扫一扫