jQuery-从左到右、从右到左
您可以使用jQuery的.animate()方法和CSS来实现一个简单的从左到右、从右到左的动画。以下是一个示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右移动动画</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
}
</style>
</head>
<body>
<button id="moveLeft">从右到左</button>
<button id="moveRight">从左到右</button>
<div id="box"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#moveLeft').click(function(){
$('#box').animate({'left': '-=100px'}, 'slow');
});
$('#moveRight').click(function(){
$('#box').animate({'left': '+=100px'}, 'slow');
});
});
</script>
</body>
</html>在这个示例中，我们有一个id为box的div和两个按钮。点击#moveLeft按钮时，#box会向左移动100像素；点击#moveRight按钮时，#box会向右移动100像素。动画执行时间设置为'slow'，即大约400毫秒。
评论已关闭