运动函数封装(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的数据封装的 ...
随机推荐
- 《DSP using MATLAB》示例Example 8.4
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- 关于altera fpga的io时序优化问题
chip planner中一个io的结构如下图所示 其中左边是输出部分右边是输入部分,但是会注意到两个结构:1,寄存器,2,delay模块 以下是我的推测:这两个结构是为了做时序优化时用的,在alte ...
- python模块--os模块的用法
os.getcwd() 获取当前工作的目录,即当前python脚本工作的目录路径 os.phdir("dirname") 改变当前脚本的工作目录:相当于shell下cd os.cu ...
- cocostudio ui编辑器 使用心得
1 c++包含路径 2九宫格设置 cocostudio ui编辑器设置九宫格x,y,w,h是从图片左上角开始测量,然后调整尺寸就行了. 2. 如果点了自适应 panel会在加载json的时候被设置 ...
- GNU Radio 入门培训
1. GNU Radio介绍 1.1 什么是GNU Radio GNU Radio是一个完全开源的软件无线电结构平台,它可以用来设计和仿真,也可以用来连接真实的无线电系统.GNU Radio是一个高度 ...
- 基于Oracle的EntityFramework的WEBAPI2的实现(二)——使用DbFirst
之所以使用DbFirst而没有使用CodeFirst是因为考虑到现实的情况中,我们之所以会选择oracle而不是SQL SERVER,一方面是因为之前公司已经在使用Oracle,而且有好多我们需要用到 ...
- CentOS 7 named设置主从复制
前两篇文章介绍了named的安装和配置forward. 本文将介绍named的主从复制. 在从named的配置中添加: zone "weiheng.ink" IN { type s ...
- demo 记录 通用方法什么的到这里抄一下
function killerrors() { return true; } window.onerror = killerrors; //检查浏览器类型 function checkBrowser( ...
- js 日期正则 转载
天秤水的Blog 博客园 博问 闪存 首页 新随笔 联系 管理 订阅 随笔- 70 文章- 0 评论- 74 最强日期正则表达式 一.简单的日期判断(YYYY/MM/DD): ^\d{ ...
- 机器学习:项目流程及方法(以 kaggle 实例解释)
一.项目目录 (一)数据加载 基础统计 特征分类 基本分布(scatter) (二)数据分析 正态性检验 偏离度分析 (hist | scatter) 峰度分析 (hist | scatter) 分散 ...