简短几句jquery代码实现一个图片向上滚动切换。

animate()参数介绍:

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。

PS:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。

首先依然要引用jquery框架,你懂得。

先看效果:

One
Two
Three

再来看看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<div style="border:5px #666 solid; width:500px; height:350px; overflow:hidden;">
       	<div id="box">
    		<div style="width:500px; height:350px; background-color:#0F0;">One</div>
       		<div style="width:500px; height:350px; background-color:#00F;">Two</div>
        	<div style="width:500px; height:350px; background-color:#696;">Three</div>
       	</div>
    </div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var Top=-350;//定义一个向上移动的距离,这个数值和你图片或DIV的高度相等
		var Time=500;//定义一个速度
		function move(){
			$("#box").animate({"margin-top":Top},Time);//animate方法,只能对数值型的值进行渐变
			Top+=-350;//运行一次增加一个图片的高度
			if(Top==-1050)//判断当总高度大于你DIV或者图片总高度
			{
				Top=0;//把距离设置回0
				Time=300;//加快移动速度
			}
			else
			{
				Time=500;//否则减慢速度
			}
		}
		setInterval(move,3000);//3秒执行一次move()
	})
</script>
</body>
</html>

作者: 红油小生 发表于 2011-08-29 22:37 原文链接

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架