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

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

！doctype html html ownerta charset=' utf-8 '标题www。jb51。net jQuery弹性运动/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script script//JavaScript Document(函数($){ $)。fn。movetx=函数(JSON){ var I=0；for(I=0；长度；i )//重要{ startMove(this[i]，JSON)；}函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；} } var iSpeed=0；var ITget=0；函数startMove(obj，JSON){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ for(var attr=0 in JSON){ iSpeed=(JSON[attr]-parsent(getStyle(obj，attr)))/5；iSpeed *=0.7iTget=iSpeedif(数学。ABS(iSpeed)1数学。ABS(ItGet-JSON[attr])1){ ClearInterval(obj。计时器)；物体。style[attr]=JSON[attr]“px”；} else { obj。style[attr]=ITget ' px '；} } }, 30);} } })(jQuery)$(function(){ var Odiv=$(' # zgz ')Odiv。单击(function(){ $(this)).moveTx({ left :500 })})})/脚本样式# zgz { width :80 px高度：80 px背景-颜色： # f00位置：绝对；left :0 pxtop :20 pxcolor : # fffpadding :10 px } # XT { width :1 px高度：500 px背景色： # 000;位置：绝对；left :500 pxtop :0 px }/style/head dydiv id=' zgz '弹性运动/divdiv id='xt'/div/body/html运行效果：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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