原生js封装元素运动函数
来源:互联网 发布:淘宝网下载电脑版 编辑:程序博客网 时间:2024/05/16 15:35
首先看看演示效果
代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数
例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码
var div = document.getElementsByClassName('demo')[0]; startMove(div, {width:200 , height:200, left:100, top:100, opacity: 50}, function(){});
/** 运动函数模型 */function startMove(obj, changeData, func) { clearInterval(obj.timer); var iCurValue = 0; var iSpeed = 0; var bStop; obj.timer = window.setInterval(function () { bStop = true;//判断当前所有动作是否全部执行完毕 for(var name in changeData) { console.log(name, changeData[name]); if(name === 'opacity') {//对透明度进行处理时注意要扩大倍数, 否则容易造成bug iCurValue = parseFloat(getStyle(obj, name)) * 100; }else { iCurValue = parseInt(getStyle(obj, name)); } iSpeed = (changeData[name] - iCurValue) / 7;//缓冲运动效果 if(iSpeed > 0) { iSpeed = Math.ceil(iSpeed); }else{ iSpeed = Math.floor(iSpeed); } if(name === 'opacity') { obj.style.opacity = (iCurValue + iSpeed) / 100; }else{ obj.style[name] = iCurValue + iSpeed + 'px'; } if(iCurValue !== changeData[name]) { bStop = false; } } if(bStop) { //整个动作执行完毕 clearInterval(obj.timer); func();//当全部动作执行完毕之后, 执行回调函数. } }, 30);}
1 0
- 原生js封装元素运动函数
- 原生JS 封装运动函数
- 原生JS如何运动ajax封装函数
- 封装js运动函数
- 用原生js封装运动框架
- 原生js封装ajax函数
- js 原生ajax:封装函数
- 原生js---轮播图封装函数
- 原生js封装ajax函数
- 原生js螺旋运动
- js原生运动
- 滚轮事件--原生JS函数封装
- 怎么用原生js封装ajax函数
- 怎样用原生js封装ajax函数
- 如何封装JS原生ajax函数
- 拖拽、移动元素的JS原生函数
- js封装运动属性
- 根据原生JS封装函数,根据传递的选择器查找对应的元素以及解决getElementsByClassName() 兼容问题
- 【caffe源码研究】第二章:使用篇(3) : C++接口
- [angular]指令之7bindToController
- QT-实例开发
- 观察者模式
- 解决viewpager+glide查看大图OOM的问题
- 原生js封装元素运动函数
- Faster-RCNN训练自己的数据集
- Mapreduce 运行原理(针对使用YARN作为调度和管理的版本)
- Android 笔记:Android将图像转换成流存储与将流转换成图像
- 机器学习相关资料
- Visual Studio 2015 设置TortoiseGit
- 电子老鼠闯迷宫
- B-树与B+树的实现及应用
- ZCMU----1779