运动函数封装(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的数据封装的 ...
随机推荐
- LeetCode String Compression
原题链接在这里:https://leetcode.com/problems/string-compression/description/ 题目: Given an array of characte ...
- {Reship}{Sparse Representation}稀疏表示
===================================================== http://blog.sina.com.cn/s/blog_6d0e97bb01015wo ...
- [Reship] Mean Shift 算法介绍
==================================================================================== This article ca ...
- hdu4261 Estimation[暴力dp+对顶堆]
https://vjudge.net/problem/HDU-4261 对于一个长2000的数列划分最多25个块,每块代价为块内每个数与块内中位数差的绝对值之和,求最小总代价. 套路化地,设$f[i] ...
- php系统函数-----数组函数
- Oracle冷备份和热备份的实践(原创)
参考本博转发的备份博文和上传的文件,进行了冷热备份实践并进行了记载以备以后查阅,本次实践的环境是win10,安装了oracle11g 一.冷备份 1.cmd->sqlplus /nolog 2. ...
- java结构
package com.hanqi;// 包名,必须在第一行,和namespace类似 //import java.io.*;//引用,和using类似 //import java.lang.*;// ...
- [Java.Web][Servlet]常用请求头
response.setStatus(302); response.setHeader("location", "/day04/1.html"); 这段代码可以 ...
- Jq将字符串复制粘贴到剪贴板
第一种: 自己测试时 只适合于input 和textarea 但是针对于其他标签的复制就不能用了.代码如下: <!DOCTYPE html> <html> <head ...
- 逻辑IO及当前模式读和一致性读的总结杂记
逻辑IO 逻辑读(确切是指db get之read不是consistentget之read):就是服务器进程从SGA上的buffercache(高速缓存)区域(先)根据SQL语句解析过程所获得的要操作的 ...