jQuery抛物线运动实现方法(附完整demo源码下载)


Posted in Javascript onJanuary 08, 2016

本文实例讲述了jQuery抛物线运动实现方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery抛物线运动实现方法(附完整demo源码下载)

点击此处查看在线演示效果。

完整实例代码点击此处本站下载。

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>抛物线运动效果</title>
 <style type="text/css">
  .boll {
   width: 50px;
   height: 50px;
   background-color: #ff3333;
   position: absolute;
   top: 380px;
   left: 100px;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
  }
  .target {
   width: 50px;
   height: 50px;
   background-color: #CDCDCD;
   position: absolute;
   top: 180px;
   left: 600px;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
  }
 </style>
 <script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
 <script type="text/javascript" src="js/parabola.js"></script>
</head>
<body>
 <div class="btns" style="margin-top:20px">
 <a href="#" class="btnA btn-danger" id="reset" rel="popover" title="A Title" style="">reset</a>
 <a href="#" class="btnA btn-danger" id="run" rel="popover" title="A Title" style="">run</a>
 <a href="#" class="btnA btn-danger" id="stop" rel="popover" title="A Title" style="">stop</a>
 <a href="#" class="btnA btn-danger" id="setOptions" rel="popover" title="A Title" style="">setOptions</a>
</div>
<div id="boll" class="boll"></div>
<div id="target" class="target"></div>
<script type="text/javascript">
 var bool = new Parabola({
  el: "#boll",
  offset: [500, 100],
  curvature: 0.005,
  duration: 3000,
  callback:function(){
   alert("完成后回调")
  },
  stepCallback:function(x,y){
   console.log(x,y);
   $("<div>").appendTo("body").css({
    "position": "absolute",
    "top": this.elOriginalTop + y,
    "left":this.elOriginalLeft + x,
    "background-color":"#CDCDCD",
    "width":"5px",
    "height":"5px",
    "border-radius": "5px"
   });
  }
 });
 $("#reset").click(function (event) {
  event.preventDefault();
  bool.reset()
 });
 $("#run").click(function (event) {
  event.preventDefault();
  bool.start();
 });
 $("#stop").click(function (event) {
  event.preventDefault();
  bool.stop();
 });
 $("#setOptions").click(function (event) {
  event.preventDefault();
  bool.setOptions({
   targetEl: $("#target"),
   curvature: 0.001,
   duration: 1000
  });
 });
</script>
</body>
</html>

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JS制作简单的三级联动
Mar 18 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
使用jQuery实现购物车
Oct 29 jQuery
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
You might like
77A一级收信机修理记
2021/03/02 无线电
php提交过来的数据生成为txt文件
2016/04/28 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
js实现返回顶部效果
2017/03/10 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
《匆匆》教学反思
2014/02/22 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
岗位竞聘书范文
2014/03/31 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
师德承诺书2015
2015/04/28 职场文书
放飞理想主题班会
2015/08/14 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫