当前位置:u赢电竞手机版 > u赢电竞竞猜app > jQuery插件实现弹性运动完整示例u赢电竞竞猜app

jQuery插件实现弹性运动完整示例u赢电竞竞猜app

文章作者:u赢电竞竞猜app 上传时间:2019-06-05

如下所示:

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

function fingers(){
  $(".box01 .fingers").animate({"width":"7.5rem","marginLeft":"-3.75rem"},500,function(){
  $(".box01 .fingers").animate({"width":"6.8rem","marginLeft":"-3.4rem"},500,fingers());
  });
 }
fingers();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery弹性运动</title>
<script src="http://www.pybaoli.com/uploads/allimg/190605/0211141F1-0.jpg"></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 animate动画持续运动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

u赢电竞竞猜app 1

本文由u赢电竞手机版发布于u赢电竞竞猜app,转载请注明出处:jQuery插件实现弹性运动完整示例u赢电竞竞猜app

关键词: