js-运动函数包
function move(obj, attr, dir, target, endFn) {
clearInterval(obj.timer) // 避免全局变量,所以要用oBox.timer
dir = parseInt(getStyle(obj, attr)) < target ? dir : -dir
obj.timer = setInterval(function() {
var speed = parseInt(getStyle(obj, attr)) + dir //步长
if(speed > target && dir > 0 || speed < target && dir < 0) {
speed = target
}
obj.style[attr] = speed + "px" //当属性作为参数传进来时,不能直接.;要用[]
if(speed == target) {
clearInterval(obj.timer)
if(endFn) {
endFn()
}
}
}, 30)
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
}
js-运动函数包的更多相关文章
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- JS里面的两种运动函数
最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...
- JS运动缓冲的封装函数
之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). /* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 rati ...
- 原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
- 运动函数封装(js)
// 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer = setInterval(functi ...
- 如何用js自己实现Animate运动函数
js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个div不断的向右边运动,那 ...
- Jquery--JS的函数包
Jquery-----JS的函数包,直接来调用方法. 一.基本知识 用法:把jquery-1.7.2.js直接复制到要做的网站项目中,拖拽引用和JS用法一样. 二.选择器 [1]基本: 1.取ID:v ...
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
- JS运动从入门到精髓!哈哈
首先来看最基础的运动:单个物体向右匀速运动到某一点停止 例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetl ...
随机推荐
- python 对象转字典
从数据库中取出的数数据是 对象类型的,不能直接展示出来,需要转成字典类型,然后转成json 字符串,传给前端: data = {} data.update(obj.__dict__) print(da ...
- 第一篇、Python初识
1.Python文件后缀是否可以任意? 单独执行的时候没关系,但当文件需要导入(即导入模块)的时候,如果不是py后缀的,会出错. 2.执行方法 1) python +文件路径 python + fil ...
- 非virtual函数,用指针进行upcast
void print_func(A* p) { p -> print(); } int main() { A a(); B b(,); //a.print(); //b.print(); pri ...
- 一个RTSP/RTP over TCP 的丢包引起的问题
背景知识:可以查看https://www.cnblogs.com/lidabo/p/4483497.html RTSP/RTP over TCP TCP承载RTSP/RTP When you us ...
- [phvia/firman] PHP多进程服务器模型中的惊群
[ 典型场景 ] 典型的多进程服务器模型是这样的,主进程绑定ip,监听port,fork几个子进程,子进程安装信号处理器,随后轮询资源描述符检查是否可读可写: 子进程的轮询又涉及到 IO复用,acce ...
- Spring再接触 IOC DI
直接上例子 引入spring以及Junite所需要的jar包 User.java package com.bjsxt.model; public class User { private String ...
- 计算机系统的通信PPT版本
通信方式 并行传送:一次8位,需要保持各路信号同时到达,距离和速度受限制,成本较高 串行传送:一次1位,距离较远.速率更高,成本较低. {在单片机的通信中,使用的是串行传送,但是数据寄存器里面的是8位 ...
- MFC笔记3
1. C6有默认的提示代码功能,但是其默认的快捷键是Ctrl + Space,这一般情况下是切换输入法快捷键,所以,只需重新设置一下快捷键就可以实现提示代码功能,具体设置位置如下: 工具(T) -&g ...
- 大数据入门到精通13--为后续和MySQL数据库准备
We will be using the sakila database extensively inside the rest of the course and it would be great ...
- scrapy爬虫框架处理流程简介
1.SPIDERS的yeild将request发送给ENGIN2.ENGINE对request不做任何处理发送给SCHEDULER3.SCHEDULER( url调度器),生成request交给ENG ...