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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 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入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
全面了解js中的script标签
2016/07/04 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python简单贪吃蛇开发
2019/01/28 Python
python实现抽奖小程序
2020/04/15 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
皮肤科医师岗位职责
2013/12/04 职场文书
酒店经理职责
2014/01/30 职场文书
留学经费担保书
2014/05/12 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
自我推荐信格式模板
2015/03/24 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis