jquery实现动画效果实例
时间: 2023-08-12 14:18:21 浏览: 75
以下是一个使用 jQuery 实现动画效果的例子:
HTML 代码:
```html
<div id="box"></div>
<button id="btn">点击</button>
```
CSS 代码:
```css
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 0;
top: 0;
}
```
jQuery 代码:
```javascript
$(document).ready(function() {
$('#btn').click(function() {
$('#box').animate({
left: '+=100px',
top: '+=100px'
}, 1000);
});
});
```
解释:
当按钮被点击时,jQuery 会选择 `#box` 元素并调用 `animate()` 方法。在 `animate()` 方法中,我们定义了要执行的动画效果,这里是将 `#box` 元素向右和向下移动 100 像素,一共需要 1 秒钟的时间完成动画效果。
通过这个例子,我们可以看到 jQuery 的 `animate()` 方法可以轻松地实现动画效果,并且可以设置动画的时间、速度、缓动方式等参数。
相关问题
jquery animate方法实例
jQuery animate()方法是一个用于实现动画效果的函数。它可以根据指定的参数在HTML元素上创建平滑的过渡效果。
例如,假设有一个 `<div>` 元素,我们想要在点击时将其宽度从200像素变为400像素,并在2秒内完成动画效果。我们可以使用animate()方法来实现这个效果。代码示例如下:
```js
$("div").click(function(){
$(this).animate({width: "400px"}, 2000);
});
```
在上述代码中,我们首先使用选择器选择了所有的 `<div>` 元素,并使用click()方法添加了一个点击事件。当用户点击 `<div>` 元素时,将会触发click()方法绑定的函数。
在点击事件函数中,调用animate()方法来执行动画效果。我们将目标元素的宽度属性设置为"400px",并指定动画的持续时间为2秒。动画效果会平滑过渡,从200像素增加到400像素。
除了宽度,animate()方法还可以用于操作其他CSS属性,如高度、透明度、位置等。可以通过传递一个包含多个CSS属性和目标值的对象来同时操作多个属性。
除了指定目标值和持续时间,animate()方法还可以接受其他可选参数,例如回调函数,在动画完成后执行特定的操作。
总结起来,jQuery animate()方法是一个非常方便的方法,可以帮助我们实现各种动画效果,从简单的属性变化到复杂的过渡效果。它的用法简单明了,通过指定目标元素和参数,我们可以轻松地创建出平滑的动画效果。
jquery垂直轮播图做背景全屏实例
下面是一个简单的jQuery垂直轮播图做背景全屏的实例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>垂直轮播图做背景全屏实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="background-container">
<ul>
<li style="background-image: url('https://picsum.photos/id/1/1600/900');"></li>
<li style="background-image: url('https://picsum.photos/id/2/1600/900');"></li>
<li style="background-image: url('https://picsum.photos/id/3/1600/900');"></li>
</ul>
</div>
<div class="content">
<h1>这是一个全屏背景的垂直轮播图</h1>
<p>在这里可以添加其他内容</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
#background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#background-container ul {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 300%;
list-style: none;
margin: 0;
padding: 0;
}
#background-container ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 33.33%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
animation: slide 10s ease infinite;
}
@keyframes slide {
0% {
transform: translateY(0);
}
33.33% {
transform: translateY(-100%);
}
66.66% {
transform: translateY(-200%);
}
100% {
transform: translateY(0);
}
}
.content {
position: relative;
z-index: 1;
padding: 50px;
text-align: center;
color: #fff;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
}
```
jQuery代码:
```
$(document).ready(function() {
var slideHeight = $('#background-container').height() / 3;
$('#background-container ul li').height(slideHeight);
$(window).resize(function() {
slideHeight = $('#background-container').height() / 3;
$('#background-container ul li').height(slideHeight);
});
});
```
在这个实例中,使用了CSS3动画实现了轮播图的滚动效果。通过设置li元素的高度为背景容器高度的1/3,可以实现全屏显示。同时,为了适应窗口大小的变化,使用了jQuery的resize事件来重新设置li元素的高度。
需要注意的是,由于背景容器的定位为fixed,因此在页面中添加其他内容时需要设置z-index属性来控制层级。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)