运动函数封装(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的数据封装的 ...
随机推荐
- iOS Webview打开不受信的URL
在我们开发过程中经常会碰到直接访问开发人员的私有地址, 这样在app 上是无法打开指定的网页的. 在iOS中需要对WKWebView 进行如下设置: 1.在工程的Plist 文件中添加一下选项 App ...
- ballerina 学习十 streams
ballerina 的streams 使用的是siddhi complex event processing 引擎处理,可以包含的语法有 projection filtering windows jo ...
- Linux环境安装配置Swftools
系统:CentOS6.5的64位版本 这里有一位仁兄的几个错误处理办法,下面是swftools的安装配置步骤: 1.安装所需的库和组件.机器之前安装过了,主要安装的是下面几个组件.如果不安装会 ...
- string源码实现分析
最近写hashtable的实现的时候用模板类的思想,在普通int,long,double类型的时候测试时没问题的,当用到string的时候,一直有问题. 实现的equal函数是比较粗暴的使用两者所有对 ...
- if的用法
if用法举例:求分数的等级 # include <stdio.h> int main(void) { float score; //score分数 printf("请输入您的考试 ...
- 搭建基于hyperledger fabric的联盟社区(四) --chaincode开发
前几章已经分别把三台虚拟机环境和配置文件准备好了,在启动fabric网络之前我们要准备好写好的chaincode.chaincode的开发一般是使用GO或者JAVA,而我选择的是GO语言.先分析一下官 ...
- Bash命令查找本机公网IP
用Bash命令查找本机公网IP wget -qO - http://ipecho.net/plain; echo
- couchdb的使用例子
couchdb安装 sudo apt-get install erlang sudo apt-get install libmozjs185-dev libicu-dev 下载源码,编译安装 启动以后 ...
- “FPGA+云"助力高性能计算
用AI防鲨鱼.用AI学写中国书法.用AI预测人类死亡时间.用AI审判罪犯……在人工智能方兴未艾的今天,越来越廉价和普及的AI领域真的是什么都不值钱,除了想象力.那在这无所不能的AI盛世,一定没道理让算 ...
- java代码---------计算器实现
总结:虽然,没有人会帮你到底,凭什么要对你怜香惜玉 注意实现哪一个运算就把相关代码放在else if这个判断语句里面 package com.rue; import java.awt.BorderLa ...