jQuery插件实现弹性运动完整示例
更新时间：2018年07月07日 16:00:52 作者：菜园子丶
这篇文章主要介绍了jQuery插件实现弹性运动,结合完整实例形式分析了jQuery插件扩展结合定时器实现页面元素抖动的相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery插件实现弹性运动的方法。分享给大家供大家参考，具体如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net 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常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery实现提交表单时不提交隐藏div中input的方法
这篇文章主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下2019-10-10
浅谈jQuery before和insertBefore的区别
下面小编就为大家带来一篇浅谈jQuery before和insertBefore的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
从这一讲开始，我们将直正接触一个JQ类库，学习一下JQ的写法，JQ的一些常用的命令等等，今天主要讲的是JQ里的选择器，这也是JQ的一大特点，这从它的名称jQuery中可以看到，主要功力体现在查询上2013-01-01
本篇文章主要是对Jquery实现控件的隐藏和显示实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事2013-11-11
如果你要使用html元素本身的属性或方法就需要使用this,如果你要使用jQuery包装后的方法或属性就要$(this)2014-05-05
这篇文章主要介绍了jquery中获取元素里某一特定子元素的代码,需要的朋友可以参考下2014-12-12
JQuery WEUI Select 组件增加搜索栏示例demo
这篇文章主要介绍了JQuery WEUI Select 组件增加搜索栏示例demo,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
锚点嘛，业余点的解释就是可以让页面定位到某个位置的点。在高度较高的页面中经常见到2012-10-10
本文详细讲解了Jquery使用AJAX方法请求数据，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
最新评论