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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
python处理二进制数据的方法
2015/06/03 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python2包含中文报错的解决方法
2018/07/09 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
对python生成业务报表的实例详解
2019/02/03 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
python与js主要区别点总结
2020/09/13 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
会计电算化应届生求职信
2013/11/03 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
四好少年事迹材料
2014/01/12 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL