要求：
- 页面包含两个HTML元素：一个按钮，一个小方块
- 动画要求：点击按钮，小方块从页面坐标300,300，加速移动到0,0
相关知识点：
- jQuery动画方法animate
- easing参数的设置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>实现页面元素加速动画效果</title>
<style type="text/css">
.btn {
border: 1px solid #fff;
border-radius: 4px;
background-color: #5cb85c;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
cursor: pointer;
}
.btn:hover {
background-color: #449D44;
}
.ball {
position: absolute;
left: 10px;
top: 60px;
background-color: #337AB7;
width: 50px;
height: 50px;
border-radius: 50px;
}
</style>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var $div = $(‘.btn‘),
$ball = $(‘.ball‘);
$div.on(‘click‘, function() {
$ball.animate({left: ‘200px‘, top: ‘200px‘}, ‘slow‘, ‘jswing‘);
})
});
</script>
</head>
<body>
<div class="btn">开始</div>
<div class="ball"></div>
</body>
</html>
时间： 2024-10-27 06:00:04