您的位置：首页 > Web前端 > JQuery

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

2011-08-29 22:37 971 查看

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

animate()参数介绍：

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

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

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

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

PS：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

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

先看效果：

One
Two
Three

// $(document).ready(function(){
var Top=-350;
var Time=500;
function move(){
$("#box").animate({"margin-top":Top},Time);
Top+=-350;
if(Top==-1050)
{
Top=0;
Time=400;
}
else
{
Time=500;
}
}
setInterval(move,3000);
})
// ]]>
再来看看代码：

<!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

// $(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);
})
// ]]>
文章出处：红油小生

http://www.colorff.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航