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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
社区国庆节活动方案
2014/02/05 职场文书
大学老师推荐信
2014/02/25 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2015年财政局工作总结
2015/05/21 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL