// 运动函数

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)的更多相关文章

  1. 原生JS封装时间运动函数

    /*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...

  2. js运动基础2(运动的封装)

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  3. Javascript之封装运动函数

    @ 目录 阶段一.仅适用单位带px属性的匀速运动 阶段二.可适用单位不带px属性(如opacity)的匀速运动 阶段三.适用于多元素单一属性的匀速运动 阶段四.适用于多元素单一属性的匀速或缓冲运动 阶 ...

  4. js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  5. 我自己的Javascript 库,封装了一些常用函数 Kingwell.js

    我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库  现在Javascript库海量,流行的 ...

  6. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  7. JS中深浅拷贝 函数封装代码

    一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

  8. react request.js 函数封装

    1.request.js  函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...

  9. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

随机推荐

  1. 数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群)

    数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群) 因为不会做目录所以请善用ctrl+F 本来想的是笔记之类的,写着写着就变成了资源整理 一些有的 ...

  2. Python模块汇总

    正则模块:re 日期和时间模块:datetime 和time模块 加密模块:hashlib 远程连接模块:paramiko 日志模块:logging 高级函数工具包:functools 多线程: 队列 ...

  3. 笔记:加密 RSA AES

    笔记:加密 RSA AES RSA 是非对称加密,有公钥和私钥. RSA算法原理(一) http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_par ...

  4. node编译安装

    node应用编译安装 安装node编译环境 # apt-get install gcc make build-essential openssl g++ zlib1g-dev libssl-doc a ...

  5. SharePoint2013 Online中InfoPath 无法调用WebService

    传说微软office365中国区服务器已经迁移到国内,试了下速度果然比之前快了很多,不过随后测试了个简单的功能,还是直接被打击了. 准备在online版本中做一个简单的报销流程测试测试,于是先用Inf ...

  6. python 多线程要点

    要点整理 多线程 #coding=utf-8 import threading from time import ctime,sleep def music(func): for i in range ...

  7. Android UI一些技巧

    (1)去掉EditText的背景颜色  android:background="@null" (2)ListView 修改某行的值,因为一些功能逻辑,需要修改ListView某行的 ...

  8. java封装后引用的例子

    封装好的文件: 另外一个文件引用封装文件的方法: 来源: https://www.runoob.com/java/java-encapsulation.html

  9. 杂项:HTML5-1/3-发展历程

    ylbtech-杂项:HTML5-1/3-发展历程 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准.外语原文:W3C Recommendat ...

  10. java 检测代理IP是否准确

    我这里提供2个方法都可以实现:第一个是createIPAddress()和convertStreamToString() import java.io.IOException; import java ...