原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数
通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后判断一下当前位置加上步长和目标位置的关系就可以了
就可以了。
简写就是这样呗*/
var obj=document.getElementById("div");
/*想要获取元素当前的位置,是要获取CSS的,obj.style.left="25"px;这样是OK的,没有问题,
但是如果你这么写 var left=obj.style.left;是获取不到的,CSS的获取,需要用到方法*/
function getCSS(obj,attr){
/*window.getComputedStyle 兼容标准浏览器 谷歌 火狐 苹果浏览器
currentStyle 是兼容IE的*/
return window.getComputedStyle?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
/*attr 是要改变的元素属性(left或者top);
step的正负决定运动方向*/
function move(obj,target,step,attr)
{
var timer=null,current=0;
clearInterval(timer);
timer=setInterval(function(){
current=parseFloat(getCSS(obj,attr));//去掉单位px
if((current+step-target)*step<0) //运动向下或者向上都满足这个条件
{
obj.style[attr]=current+step+"px";
}
else{
obj.style[attr]=target+"px";
clearInterval(timer);
}
},1000/60);
}
时间运动函数
function getCSS(obj,attr){
return window.getComputedStyle?window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
function $(id){return document.getElementById(id);}
/*时间运动主要依赖一个公式 变化的时间/总时间=变化的位移/总位移
当比值为1的时候,运动就结束了呗!
变化的时间=当前时间-初始的时间
变化的位置=当前位置-初始位置
每次移动的位移=(变化的时间/总时间)*总位移
*/
function move(obj,attr,time,target)
{
var current=parseFloat(getCSS(obj,attr));//获取当前位置
var startTime=new Date();//获取当前时间
var offset=target-current;//总偏移量,总位移
var changeTime=0;//变化的时间
obj.timer=null;
clearInterval(obj.timer);//使用定时器之前清除一下,只是一个良好的习惯,避免多次产生定时器
obj.timer=setInterval(function(){
changeTime=(new Date()-startTime);//变化的时间
var t=changeTime/time;//变化的时间/总时间
if(t>=1){
obj.style[attr]=target+"px";
clearInterval(obj.timer);
}
else{
obj.style[attr]=current+t*offset+"px";
}
},1000/60);
}
经过测试都是没问题的
转载于:https://www.cnblogs.com/liveoutfun/p/8733155.html
原生JS封装时间运动函数相关推荐
- 原生js封装元素运动函数
首先看看演示效果 代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数 例如向上面那个演示, 注意: opacity要乘 ...
- animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
- 原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 原生js封装table组件
使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...
- 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 = ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定 取消按钮可选 调用方法: 1 P ...
最新文章
- 横扫六大权威榜单,达摩院自家深度语言模型体系AliceMind开源了
- 实验一、词法分析实验
- 算法--------二叉树的中序遍历
- iOS UI基础-11.0 UINavigationController
- android镊 姩瀹夎 apk,用java写的jodconverter借用openoffice来转换office成pdf的示例代码...
- Redis failover过程
- SpringBoot注解大全(转)
- 常用加密算法(Java实现)总结
- 零基础学python数据分析_Python学习指南:使用Python学习数据分析
- matlab实现谱聚类法图像分割代码,一种基于谱聚类的图像分割方法与系统与流程...
- dt dl dd 的英文含义
- 电脑是否入侵,是否留有后门
- win10下同一局域网电脑互传文件
- 最流行的统计假设检验速查表
- JavaCV本地视频流通过帧图片添加文本进行字幕合成
- Pyton入门的歪路
- 上海证券交易所-债券品种介绍
- 【Layui】操作成功后返回父级并且刷新
- 非官方新人参考之quake3入门碎解
- struts1 使用poi组件 读取excel文件,创建excel ,输出excel文件
热门文章
- getchar()函数的一些知识
- 爬楼梯—leetcode70
- One or more breakpoints cannot be set and have been disabled
- MIPS 通用寄存器
- “真三”中的人生哲理
- 2019牛客暑期多校训练营(第三场)F - Planting Trees (枚举 + 单调队列)
- c++ primer 5th ,习题11.23自己编写答案
- 质数判断,不同算法效率比较
- 应用服务器与数据库之间是长连接,要接收多个 tcp 长连接不断发送的数据并存储,哪些数据库或数据存储方案比较合适?...
- TIBCO Rendezvous — 技术介绍