// 运动函数

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. 《DSP using MATLAB》示例Example 8.4

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  2. 关于altera fpga的io时序优化问题

    chip planner中一个io的结构如下图所示 其中左边是输出部分右边是输入部分,但是会注意到两个结构:1,寄存器,2,delay模块 以下是我的推测:这两个结构是为了做时序优化时用的,在alte ...

  3. python模块--os模块的用法

    os.getcwd() 获取当前工作的目录,即当前python脚本工作的目录路径 os.phdir("dirname") 改变当前脚本的工作目录:相当于shell下cd os.cu ...

  4. cocostudio ui编辑器 使用心得

    1 c++包含路径 2九宫格设置 cocostudio ui编辑器设置九宫格x,y,w,h是从图片左上角开始测量,然后调整尺寸就行了. 2.  如果点了自适应  panel会在加载json的时候被设置 ...

  5. GNU Radio 入门培训

    1. GNU Radio介绍 1.1 什么是GNU Radio GNU Radio是一个完全开源的软件无线电结构平台,它可以用来设计和仿真,也可以用来连接真实的无线电系统.GNU Radio是一个高度 ...

  6. 基于Oracle的EntityFramework的WEBAPI2的实现(二)——使用DbFirst

    之所以使用DbFirst而没有使用CodeFirst是因为考虑到现实的情况中,我们之所以会选择oracle而不是SQL SERVER,一方面是因为之前公司已经在使用Oracle,而且有好多我们需要用到 ...

  7. CentOS 7 named设置主从复制

    前两篇文章介绍了named的安装和配置forward. 本文将介绍named的主从复制. 在从named的配置中添加: zone "weiheng.ink" IN { type s ...

  8. demo 记录 通用方法什么的到这里抄一下

    function killerrors() { return true; } window.onerror = killerrors; //检查浏览器类型 function checkBrowser( ...

  9. js 日期正则 转载

    天秤水的Blog 博客园 博问 闪存 首页 新随笔 联系 管理 订阅 随笔- 70  文章- 0  评论- 74    最强日期正则表达式   一.简单的日期判断(YYYY/MM/DD):  ^\d{ ...

  10. 机器学习:项目流程及方法(以 kaggle 实例解释)

    一.项目目录 (一)数据加载 基础统计 特征分类 基本分布(scatter) (二)数据分析 正态性检验 偏离度分析 (hist | scatter) 峰度分析 (hist | scatter) 分散 ...