jQuery插件实现弹性运动完整示例


Posted in jQuery onJuly 07, 2018

本文实例讲述了jQuery插件实现弹性运动的方法。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com jQuery弹性运动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// JavaScript Document
(function($){
  $.fn.moveTx=function(json)
  {
    var i=0;
    for(i=0;i<this.length;i++)//重要
    {
      startMove(this[i],json);
    }
    function getStyle(obj, attr)
    {
      if(obj.currentStyle)
      {
        return obj.currentStyle[attr];
      }
      else
      {
        return getComputedStyle(obj, false)[attr];
      }
    }
var iSpeed=0;
var iTget=0;
function startMove(obj,json)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    for(var attr=0 in json)
    {
      iSpeed+=(json[attr]-parseInt(getStyle(obj, attr)))/5;
      iSpeed*=0.7;
      iTget+=iSpeed;
      if(Math.abs(iSpeed)<1 && Math.abs(iTget-json[attr])<1)
      {
        clearInterval(obj.timer);
        obj.style[attr]=json[attr]+'px';
      }
      else
      {
        obj.style[attr]=iTget+'px';
      }
    }
  }, 30);
}
}})(jQuery)
$(function(){
  var oDiv=$('#zgz')
  oDiv.click(function(){
    $(this).moveTx({left:500})
  })
})
</script>
<style>
#zgz{ width:80px; height:80px; background-color:#f00;position:absolute; left:0px; top:20px; color:#fff; padding:10px;}
#xt{ width:1px; height:500px; background-color:#000; position:absolute; left:500px; top:0px;}
</style>
</head>
<body>
<div id="zgz">弹性运动</div>
<div id="xt"></div>
</body>
</html>

运行效果:

jQuery插件实现弹性运动完整示例

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
You might like
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
数据库方面面试题
2012/04/22 面试题
启动一个线程是用run()还是start()
2016/12/25 面试题
商标侵权律师函
2015/05/27 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
iPhone13再次曝光
2021/04/15 数码科技
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
在Python 中将类对象序列化为JSON
2022/04/06 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技