现在的位置: 首页 > 综合 > 正文

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

2013年07月16日 ⁄ 综合 ⁄ 共 1849字 ⁄ 字号 评论关闭

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

animate()参数介绍:

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

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

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

PS:但是如果你引用了最新jquery ui框架的话backgroudColor,color之类的属性也可以实现渐变了。

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 xmlns="http://www.w3.org/1999/xhtml">
<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=400;//加快移动速度
			}
			else
			{
				Time=500;//否则减慢速度
			}
		}
		setInterval(move,3000);//3秒执行一次move()
	})
</script>
</body>
</html>

js部分也可以这样,实现一个回滚效果:

$(document).ready(function(){
        var Top=-350;
        var Time=500;
        var more=-50;
        function move(){
            $("#box").animate({"margin-top":Top+more},Time);
            $("#box").animate({"margin-top":Top},300);
            Top+=-350;
            if(Top==-1050)
            {
                Top=0;
                more=50;
                Time=400;
            }
            else
            {
                Time=500;
                more=-50;
            }
        }
        setInterval(move,3000);
    })

效果:

One
Two
Three

文章出处:红油小生

 http://www.colorff.com

抱歉!评论已关闭.