原生js封装运动框架的示例讲解


Posted in Javascript onOctober 01, 2017

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架.

正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装.

首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子

如下代码:

#div{
width: 100px;

height: 100px;

background: gold;

position: absolute;

left:0;

top:0;

opacity: 1;
}

然后我们就开始写js代码了,如下:

window.onload=function() {

var oDiv = document.getElementById("div");

var timer;

写一个函数,方便以后用的时候直接调用就好了,首先先传入几个参(要运动的对象,变动的属性,终点距离,运动总时间,回调函数)----今天的只是简单的封装一下,你也写可以传入一个json

 

function move(obj,name, target, dur,fn) {
// 总步数=总时间÷计时器设定的时间
var count = parseInt(dur / 30);
// 起始位置

var start = parseFloat(setStyle(obj,name));
// 总距离=传入的距离-起始距离

var dis = target - start;
// 每步运动的距离=总距离÷总步数

var spen = dis / count;
// 定义起始步数

var n = 0;

timer = setInterval(function () {

n++;
// 把当前运动的位置保存

var cur=start + n * spen;
// 判断属性是不是透明度,透明度不用加单位

if(name=='opacity'){


obj.style[name]=cur;
// 兼容IE低版本,IE的透明度是1到100


obj.style.filter='alpha('+cur*100+')';

}else {


obj.style[name] = start + n * spen + "px";

}
// 判断运动是否完成

if (n == count) {
// 完成后清除定时器,停止运动


clearInterval(timer);
// 判断用户是否传入回调函数


fn && fn();

};
 }, 30);
};

 然后自己随便写一些调用回调函数,测试一下:

oDiv.onclick=function(){

move(oDiv,"left",600,1000,function(){



move(oDiv,'top',400,1000,function(){




move(oDiv,"width",300,1000,function(){





move(oDiv,"opacity",0,1000);




});



});


});

};
// 获取非行间样式

function setStyle(obj,name){
// 考虑兼容性问题


if(obj.currentStyle){//不兼容火狐和谷歌



return obj.currentStyle[name];


}else{



return getComputedStyle(obj,false)[name];//不兼容IE


};

};
};

好了,今天就先封装到这里了,这只是简单的封装一下,明天我们会改进一下,比如参数太多、参数顺序不能乱的问题,还有多次点击计时器出现的Bug的问题,如果你有好的方法欢迎评论区留言,程序员之间就是要相互学习的,明天见,老铁们!

以上这篇原生js封装运动框架的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
原生js 秒表实现代码
Jul 24 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 #Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 #Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 #Javascript
React实践之Tree组件的使用方法
Sep 30 #Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 #Javascript
You might like
几种显示数据的方法的比较
2006/10/09 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
深入PHP curl参数的详解
2013/06/17 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
短信提示使用 特效
2007/01/19 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
利用python实现数据分析
2017/01/11 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
名企HR怎样看待求职信
2014/02/23 职场文书
办公室主任职责范本
2014/03/07 职场文书
大一新生学期自我评价
2014/04/09 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
通知的格式范文
2015/04/27 职场文书
安全守法证明
2015/06/23 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
零基础学java之循环语句的使用
2022/04/10 Java/Android
详解PyTorch模型保存与加载
2022/04/28 Python