原生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 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
js中日期的加减法
May 06 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 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
PHP 开发工具
2006/12/06 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
three.js 入门案例详解
2018/01/23 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
优秀团员个人事迹材料
2014/01/29 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
物业总经理岗位职责
2014/02/28 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
工程部文员岗位职责
2015/02/04 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL