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 DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
基于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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python实现自动登录
2018/09/17 Python
详解Python做一个名片管理系统
2019/03/14 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python 命令行传入参数实现解析
2019/08/30 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
文秘专业毕业生就业推荐信
2013/11/08 职场文书
影视制作岗位职责
2013/12/04 职场文书
给导游的表扬信
2014/01/10 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
诚信考试主题班会
2015/08/17 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
React中的Context应用场景分析
2021/06/11 Javascript