[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：实现页面元素加速动画效果的更多相关文章
- Vue页面跳转动画效果实现
Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- JQuery能够高效地操作页面元素
关于DOM和CSS的页面元素选择: $("span"); //全部span元素 $("#elem"); //id为elem的元素 $(".c ...
- 最简单实用的JQuery实现banner图中的text打字动画效果！！！
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- 基于swiper的移动端H5页面,丰富的动画效果
概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
- Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- 实现页面切换（动画效果实现，不用ViewPager）
源代码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <?xml version=" ...
- 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
- [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- QTP中FSO的使用
序 FSO即文件系统对象(File System Object),在测试工作中有广泛的应有,它可以帮助我们自动生成测试目录,写日志,测试报告等.FSO有对象有很多属性和方法,今天只介绍几个常用的. 创 ...
- 对MMU段式转换的理解
本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...
- bzoj1251 序列终结者（Splay Tree+懒惰标记）
Description 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这 ...
- Ubuntu 12.04 Server OpenStack Havana多节点(OVS+GRE)安装
1.需求 节点角色 NICs 控制节点 eth0(10.10.10.51)eth1(192.168.100.51) 网络节点 eth0(10.10.10.52)eth1(10.20.20.52)eth ...
- [C++关键字] 内置类型
bool, char, short, char16_t (C++11), int, char32_t (C++11), float, long, double,在64位机器上测试各种类型的大小,代码如 ...
- 动态规划——概率dp
所谓概率dp,用动态规划的思想找到一个事件中可能发生的所有情况,然后找到符合要求的那些情况数,除以总数便可以得到符合要求的事件发生的概率.其核心思想还是通过dp来得到事件发生的所有情况,很类似在背包专 ...
- #345 div2 D. Image Preview
Vasya's telephone contains n photos. Photo number 1 is currently opened on the phone. It is allowed ...
- 借助github搭建自己的博客
创建GitHub技术博客全攻略 通过GitHub Pages建立个人站点(详细步骤) 备注: 我搭建成功了,但是访问时只能使用"http://username.github.io/usern ...
- Android应用开发学习之画廊视图
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 画廊视图Gallery能按水平方向显示一组图片,并可以拖动图片.下面我们来看一个使用画廊视图的例子,其运行效果如下: ...
- Hadoop 的子项目
Hadoop Common: 在0.20及以前的版本中,包含HDFS.MapReduce和其他项目公共内容,从0.21开始HDFS和MapReduce被分离为独立的子项目,其余内容为Hadoop Co ...