Heim > Web-Frontend > js-Tutorial > 简短几句jquery代码的实现一个图片向上滚动切换_jquery

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

WBOY
Freigeben: 2016-05-16 18:02:38
Original
1067 Leute haben es durchsucht

animate()参数介绍:
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
PS:但是如果你引用了最新jquery ui框架的话backgroudColor,color之类的属性也可以实现渐变了。
PS:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
首先依然要引用jquery框架,你懂得。
再来看看代码:

复制代码 代码如下:





无标题文档




One

Two

Three








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);
})
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage