原生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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
MockJs结合json-server模拟后台数据
Aug 26 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php中static和const关键字用法分析
2016/12/07 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python测试驱动开发实例
2014/10/08 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python处理大数字的方法
2015/05/27 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
python 自动批量打开网页的示例
2019/02/21 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
大学生实习证明范本
2014/01/15 职场文书
小学体育教学反思
2014/01/31 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
辞职信标准格式
2015/02/27 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang