原生JS封装运动框架。

//获取非行内样式function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,1)[attr];}
}//运动框架
function sport(obj,json,fn){ //回调函数：把一个函数以一个参数的形式传递给另一个函数时，传递的这个参数就叫做回调函数//1. 清除上一次的计时器
    clearInterval(obj.timer);//2. 开启新的计时器obj.timer = setInterval(function(){//1. 设置开关var stop = true;//2. 遍历jsonfor(var attr in json){//1. 获取当前属性值//透明度和其它属性if(attr === 'opacity'){var cur = parseInt(parseFloat(getStyle(obj,attr)) * 100);}else{var cur = parseInt(getStyle(obj,attr));}//2. 计算速度var speed = (json[attr] - cur) / 8;// 0.75    // -0.75speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//3. 判断属性是否到达目标值，没有到达，开关为falseif(cur != json[attr]){stop = false;}//4. 设置运动if(attr === 'opacity'){obj.style.opacity = (cur + speed) / 100;obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';}else{obj.style[attr] = cur + speed + 'px';}}//3. 停止计时器if(stop){clearInterval(obj.timer);if(typeof fn === 'function'){fn();}}},30)
}

转载于:https://www.cnblogs.com/PrayLs/p/10411252.html

原生JS封装运动框架。相关推荐

animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生js封装cookie插件
最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下, ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
封装运动框架多个属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
用原生 JS 实现 MVVM 框架2——单向绑定
上一篇写了实现 MVVM 框架的一些基本概念本篇用代码来实现一个完整的 MVVM 框架思考假设有如下代码,data里面的name会和试图中的{{name}}--一一映射,修改data的值,会直接 ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...

原生JS封装运动框架。

原生JS封装运动框架。相关推荐

最新文章

热门文章