原生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中匿名函数,函数直接量和闭包
May 08 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
jQuery实现评论模块
Aug 19 jQuery
vue实现登录功能
Dec 31 Vue.js
使用react-virtualized实现图片动态高度长列表的问题
May 28 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中cookies使用指南
2007/03/16 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
代理协议书范本
2014/04/22 职场文书
企业领导对照检查材料
2014/08/20 职场文书
党员思想汇报材料
2014/12/19 职场文书
酒店开业主持词
2015/07/02 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS