当我们在前端开发中需要实现网站的动态效果时,很多情况下需要使用动画效果,而jQuery中是提供了一个非常方便的动画库——animate,它能够轻松实现元素的自定义动画。下面是使用animate实现自定义动画的步骤:
在html文档中引入jQuery库的代码如下:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
使用jQuery选择器选择需要动画的元素,并且需要设置元素动画开始时的初始状态。
示例代码:
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
$(function(){
$('.box').css({
'left' : '0',
'top' : '0',
'background-color' : 'green'
});
})
设置动画结束时元素动画达到的目标状态。
示例代码:
$(function(){
$('.box').animate({
'left' : '100px',
'top' : '100px',
'background-color' : 'blue',
'width' : '150px',
'height' : '150px'
}, 2000, 'linear', function(){
alert('动画执行完毕!');
});
})
这里的animate方法有四个参数:
示例代码:
<div class="container">
<div class="img-container">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image5.jpg" />
<img src="image6.jpg" />
</div>
</div>
.container {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
}
.img-container {
position: absolute;
left: 0;
top: 0;
}
.img-container img {
float: left;
width: 400px;
height: 300px;
}
$(function(){
var imgWidth = $('.img-container img').width();
var imgCount = $('.img-container img').length;
var interval = 3000;
var timer;
$('.img-container').width(imgWidth * imgCount);
var leftMargin = 0;
function slide(){
leftMargin -= imgWidth;
$('.img-container').animate({
marginLeft: leftMargin
}, 1000, 'linear', function () {
if (leftMargin < -imgWidth*(imgCount-1)) {
leftMargin = 0;
$('.img-container').css('marginLeft', 0);
}
});
};
timer = setInterval(slide, interval);
})
这段代码实现了图片的无限滚动。它首先获取图片的宽度和数量,然后设置图片容器div的宽度为宽度的累积和。slide函数调用.animate方法实现图片容器的滚动,最后再设置marginLeft的值,如果marginLeft值小于最后一张图片的负值,就重新把marginLeft设置为0,实现无限滚动的效果。最后再使用setInterval函数执行slide函数,实现定时滚动的效果。