原生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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
基于Vue实现微前端的示例代码
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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php数组去重实例及分析
2013/11/26 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
dedecms中使用php语句指南
2014/11/13 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
javascript测试题练习代码
2012/10/10 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
用Python实现读写锁的示例代码
2018/11/05 Python
pandas ix &iloc &loc的区别
2019/01/10 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python数据库小程序源代码
2019/09/15 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
DJI全球:DJI Global
2021/03/15 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
公司离职证明样本
2014/09/13 职场文书
四风查摆剖析材料
2014/10/10 职场文书
处罚决定书范文
2015/06/24 职场文书
大学生党课感想
2015/08/11 职场文书
诚信考试主题班会
2015/08/17 职场文书