运动函数封装(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的数据封装的 ...
随机推荐
- jquery ajax 超时设置
自:jquery ajax超时设置 var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 typ ...
- c#开发的程序安装时动态指定windows服务名称
转自:http://www.jb51.net/article/30549.htm 前段时间由于项目的需求,要在Windows里把同样的组件制作成多个不同名称的服务,这些服务完成类似的功能,仅需要修改业 ...
- [Drools]JAVA规则引擎 -- Drools- 转http://blog.csdn.net/quzishen/article/details/6163012
[Drools]JAVA规则引擎 -- Drools 标签: java引擎exceptiongetterstringsetter 2011-01-25 14:33 113340人阅读 评论(35) 收 ...
- Mathtype启动失败与Microsoft公式编辑器Equation的问题处理案例
最近写毕业论文需要使用Mathtype,安装成功后,启动Word,使用Mathtype,出现各种问题. 遇到的问题: 1.弹出“用于创建对象的程序是Equation.您的计算机尚未安装此程序.若要编辑 ...
- Linux服务器运维安全策略经验分享
http://jxtm.jzu.cn/?p=3692 大家好,我是南非蚂蚁,今天跟大家分享的主题是:线上Linux服务器运维安全策略经验.安全是IT行业一个老生常谈的话题了,从之前的“棱镜门”事件中折 ...
- 11.Python使用Scrapy爬虫小Demo(新手入门)
1.前提:已安装好scrapy,且已新建好项目,编写小Demo去获取美剧天堂的电影标题名 2.在项目中创建一个python文件 3.代码如下所示: import scrapy class movies ...
- Regexper:牛逼的 JavaScript 正则可视化工具
RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 C ...
- linq左连接
Table1和Table2连接,把Table1的全列出来 var tempData = from a in table1 join b in table2 on a.Id equals b.aId i ...
- 最近遇到的几个纯C编程的陷阱
首先是一个不容易看出来的语法上的陷阱 经过调试得出的错误是对非socket的socket操作出错,sockfd在调试过程中发现是0,不是一个合理的文件描述符. 仔细一看原来是括号忘记加了,该运算是先用 ...
- AngularJS.js: temple
ylbtech-AngularJS.js: temple 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 ...