// 运动函数

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. 关于matlab中定点数overflow的处理办法

    定点数overflow的处理有两种办法:1,saturate,也就是说如果超过定点的最大值就取最大值,例如最大值是6结果是8,那么就取6:2,wrap,就是循环,如下图所示

  2. POJ3045 Cow Acrobats

    题意 Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away and join t ...

  3. <>这个符号表示泛型的意思

    <>这个符号表示泛型的意思,泛型不是类而是类的模版 为什么是模版 这就与这个T有关了,如List<T> 这个T只是一个占位符,可以代表任意类型如 List<string& ...

  4. cocos2dx ScrollView的用法

    http://blog.csdn.net/u014096244/article/details/21525789 http://bbs.9ria.com/thread-199305-1-1.html ...

  5. 洛谷3354(IOI2005)河流——“承诺”

    题目:https://www.luogu.org/problemnew/show/P3354 虽说是几个月前曾经讲过的题,但没有题解而自己(花了两个多小时)A了好高兴!!! 这是一个很好的套路:“承诺 ...

  6. java根据特定密钥对字符串进行加解密

    package com.test; import java.io.IOException; import java.security.SecureRandom; import javax.crypto ...

  7. 兼顾FPGA和单片机

    当今,FPGA和单片机的应用非常广泛,在有FPGA知识的基础上,笔者认为可以把FPGA作为主要的学习目标,单片机作为辅助技能.其实二者是相互促进的.不管是FPGA还是单片机的开发其实都是基于较强的逻辑 ...

  8. Nginx+jwPlay搭建流媒体服务器,记忆播放

    1.具体的流媒体服务器的搭建参考博客: http://blog.chinaunix.net/uid-20639775-id-154556.html 具体可能编译的时候有个地方报错 /root/ngin ...

  9. 【学徒日记】Unity 动画调用事件

    http://note.youdao.com/noteshare?id=a15f965fc57a0b25c87ee09388cf0f4a 具体内容看上面的链接. 1. 在脚本里写一个函数,它的参数只能 ...

  10. npm 自身的升级

    npm 是随 NodeJS 一起发布的包管理工具,默认采用的并不一定是最新版本,某些情况下(比如使用了某个IDE)需要最新版本的 npm , 咋办?单独升级,官方的几种说法的操作比较复杂,本经验就是说 ...