JS运动框架
来源:互联网 发布:软件实施工程师面试 编辑:程序博客网 时间:2024/05/22 13:06
代码来自慕课网教程
function starMove(obj, attr, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var incur = parseInt(getStyle(obj, attr)); var speed = (target - incur) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) if (incur == target) { clearInterval(obj.timer); } else { obj.style[attr] = incur + speed + 'px'; } }, 30)}function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; }}
这并不是最完美的框架因为还没有加入对透明度的兼容性以及链式反应
框架要点
先获得需要改变的对象和JS中CSS的属性名
先清楚已经在这个Obj上的计时器(防止多次移入鼠标时计时器叠加)
通过getstyle方法获得当前属性的静态属性
然后计算速度:如果目标大于当前属性位置,则速度为正,并用Math.ceil()方法将向上round为整数以便浏览器能够继续计算他的属性值(因为浏览器不接受小数的像素值),反之速度为负,用Math.floor()函数
然后判断,如果当前属性位置已经到达target则清除计时,如果没有达到,则通过obj.style获取当前属性并更新属性值
0 0
- js运动-完美运动框架
- js运动--同时运动框架
- JS链式运动框架
- JS-运动框架
- js 运动框架
- JS运动框架
- JS运动基础框架
- JS完美运动框架
- 万能JS运动框架
- JS运动框架
- JS运动框架
- JS之运动框架
- JS完美运动框架
- js缓冲运动框架
- 完美运动框架【js】
- 运动框架js
- js运动框架
- js运动框架
- jenkins实现cocoapods官方sepc库映射自动更新
- jQuery EasyUI使用教程之启用数据网格内联编辑
- 缓存一致性(Cache Coherency)入门
- Linux音视频(alsa库的移植须知)
- 百度地图API学习笔记(五)
- JS运动框架
- bzoj 2474
- SAS 多个文件导入
- CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解
- UVA 136 Ugly Numbers(队列)
- 使用maven集成Dubbo
- linux集群间配置互信
- Android Studio 加快编译速度
- Java设计模式