html5图片向上滚动代码,简短几句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;//定义一个向上移动的距离，这个数值和你图片或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()

})

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);

})