首页 > 代码库 > [jQuery编程挑战]001：实现页面元素加速动画效果
[jQuery编程挑战]001：实现页面元素加速动画效果
要求：
- 页面包含两个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>
[jQuery编程挑战]001：实现页面元素加速动画效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。