当前位置:首页 > 新闻中心 >

js 动画3 完美框架

作者:厦门七星音乐岛文化传播有限公司 发布时间:2017-09-02 11:47:25

js 动画3 完美框架 js 框架: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,json,fn){ var flag = true;//假设 clearInterval(obj.timer); obj.timer = setInterval(function(){ for(var attr in json) { //取当前值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur = parseInt(getStyle(obj,attr)) } //算速度 var speed = (json[attr]-icur)/8; speed = speed >0?Math.ceil(speed):Math.floor(speed); //检测停止 if(icur != json[attr]){ flag = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur +speed)+')'; obj.style.opacity = (icur + speed)/100; } else{ obj.style[attr] = icur + speed + 'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30) }

链式动画(前一个动作完成,后一个动作继续):

html;" http-equiv="Content-Type" /> <script src=move.js></script><script> window.onload = function(){ var li = document.getElementById('li1'); li.onmouseover = function(){ startMove(li,'width',400,function(){ startMove(li,'height',200,function(){ startMove(li,'opacity',100); }); }); } li.onmouseout = function(){ startMove(li,'opacity',30,function(){ startMove(li,'height',100,function(){ startMove(li,'width',200); }); }); } } </script>



同时动画(多个动作同时完成): <script src=move.js></script><script> window.onload = function(){ var oli = document.getElementById('li1'); oli.onmouseover = function(){ startMove(oli,{width:400,height:200,opacity:100}); } oli.onmouseout = function(){ startMove(oli,{width:200,height:100,opacity:30}); } } </script>

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:荆州网站制作 http://jingzhou.666rj.com

  • 上一篇:jsp导出excel 解决文件名中文乱码
  • 下一篇:最后一页
  • 

    COPYRIGHT © 2015 厦门七星音乐岛文化传播有限公司 ALL RIGHTS RESERVED.

    本站所有原创信息,未经许可请勿任意转载或复制使用

    网站地图 技术支持:肥猫科技
    精彩专题:网站建设
    购买本站友情链接、项目合作请联系客服QQ:2500-38-100