运动函数封装(js)
// 运动函数
function starMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop = true;
for(var name in json){
var iTarget = json[name]; // 目标点
if(name = 'opacity'){
var cur = parseInt(parseFloat(getStyle(obj,name))*100);
}else{
var cur = parseInt(getStyle(obj,name));
}
var speed = (iTarget-cur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);// 每30毫秒运动的距离,数值越小运动越慢
if(name = 'opacity'){
obj.style.opacity = (cur+speed)/100;
}else{
obj.style[name]= cur+speed+'px';
}
if(cur != iTarget){
bStop = false;
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
},30);
}
// 获取css样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return obj.getComputedStyle(obj)[attr];
}
}
运动函数封装(js)的更多相关文章
- 原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
- js运动基础2(运动的封装)
简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...
- Javascript之封装运动函数
@ 目录 阶段一.仅适用单位带px属性的匀速运动 阶段二.可适用单位不带px属性(如opacity)的匀速运动 阶段三.适用于多元素单一属性的匀速运动 阶段四.适用于多元素单一属性的匀速或缓冲运动 阶 ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- 我自己的Javascript 库,封装了一些常用函数 Kingwell.js
我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库 现在Javascript库海量,流行的 ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- JS中深浅拷贝 函数封装代码
一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...
- react request.js 函数封装
1.request.js 函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...
- js cookie创建读取删除函数封装
js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...
随机推荐
- SQL server无法连接,服务无法启动
Windows 不能在 本地计算机 启动 SQL Server 服务 错误代码126 在使用SQL2005(或2008)是可能会遇到错误提示: “Windows 不能在 本地计算机 启动 SQL Se ...
- 基于模k可逆计数的数字锁相环fpga实现
参考http://wenku.baidu.com/view/59420cb069dc5022aaea00bd.html 实现结构是参考的上边的实例,我用的全同步实现,实现过程中发现一些现象,做下记录. ...
- 两分钟学会Android平台NDK编程(无须Eclipse和cygwin,可使用命令行打包多个so)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangbin_jxust/article/details/37389383 之前在进行cocos2d ...
- 软件设计----LisKov替换原则(LSP)
LisKov替换原则的定义:一个软件实体如果使用的是一个基类的话,一定适用于其子类,而且根本不能觉察出基类对象和子类对象的区别. 1)怎么理解上面的概念?就是我们程序设计的子类型能够完全替换父类型,而 ...
- Firewalld防火墙与ICMP攻击
原文地址:http://www.excelib.com/article/293/show 提到ICMP大家应该都很熟悉,可能有人会说:不就是ping吗?但是说到ICMP攻击以及相关防御措施可能就有的人 ...
- node的socket.io的广播消息
在多个客户端与服务器端建立连接后,socket.io()服务器具有一个sockets属性,属性值为所有与客户端建立连接的socket对象.可以利用该对象的send方法或emit方法向所有客户端广播消息 ...
- 浅谈PHP面向对象编程(五、继承)
5.0 继承 5.1 继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使许多事物之间形成一种关系体系 . 例如猫和狗都属于动物,程序中 ...
- iframe有哪些缺点?
iframe会阻塞主页面的Onload事件: iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载.使用iframe之前需要考虑这两个缺点.如果需要使用ifram ...
- Linux的bond模式绑定及模式区别
[Linux的bond模式配置] 原理: 多块网卡虚拟成一张,实现冗余:多张网卡对外显示一张,具有同一个IP: 工作在网卡是混杂模式的情况下: 对于多物理网卡的 Bond 网卡而言,其中一块物理网卡会 ...
- 基于3D卷积神经网络的行为识别:3D Convolutional Neural Networks for Human Action Recognition
简介: 这是一片发表在TPAMI上的文章,可以看见作者有余凯(是百度的那个余凯吗?) 本文提出了一种3D神经网络:通过在神经网络的输入中增加时间这个维度(连续帧),赋予神经网络行为识别的功能. 相应提 ...