铁雪资源网 Design By www.gsvan.com
平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东:
兼容:IE系列、chrome、firefox、opera、Safari、360
/* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function(){ console.log('end'); }); */ var Move = { version: '1.5', //判断是否空对象 isEmptyObject: function(obj) { for (var attr in obj) { return false; } return true; }, //取CSS样式值 getStyle: function(obj, attr) { if (obj.currentStyle) { //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } }, //运动 action: function(obj, json, sv, callback) { _this = this; //obj是否为空 if (_this.isEmptyObject(obj)) { return false; } //运动开始 clearInterval(obj.timer); obj.timer = setInterval(function() { var isAllCompleted = true, //假设全部运动都完成了 speed, //速度 attrValue, //当前值 targetV; //目标值 for (attr in json) { attrValue = _this.getStyle(obj, attr); switch (attr) { case 'opacity': attrValue = Math.round((isNaN(parseFloat(attrValue)) "alpha(opacity=" + (attrValue + speed) + ")"; obj.style.opacity = (attrValue + speed) / 100; }; break; default: obj.style[attr] = attrValue + speed + 'px'; } } //所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器 if (isAllCompleted) { clearInterval(obj.timer); if (typeof callback === 'function') { callback(); } } }, 30); } };
以上就是描述了javascript实现网页中涉及的简易运动的方法,希望对大家实现javascript简易运动有所启发。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。