今天做的是匀速情况下div的运动。首先开始之前先了解运动的原理

A------------>>B
A移动到B 这段距离是总距离    用一个变量保存下来:var d
A移动到B 移动的总次数      用一个变量保存下来:var c
A移动到B 每次移动的距离     用一个变量保存下来:var s

function move(obj,name,target,dur,fn){
var timer; //控制定时器
var c=parseInt(dur/); //移动的总步数
var start=parseFloat(getStyle(obj,name)); //获取当前元素样式的属性值
var d=target-start; //移动的总距离
var s=d/c; //每次移动的距离
var n=; //初始化步数
timer=setInterval(function(){
n++;
var cur=statrt+n*s;
obj.style[name]=cur+'px';
//[]语法是使用参数的方法
// .语法在这里是不可以用的
if(n==c){//移动结束的时候
clearInterval(time);//清除定时器
fn && fn();//有方法的时候调用方法,
//没有的时候什么都不做。
};
},); // 定时器里设定时间都是固定的 但是这些时间都是有误差的
//30ms是定时器中误差最小的 ±3 并且运行起来感觉是最好的
}

调用封装的方法

var oDiv=document.getElementById("div");
oDiv.onclick=function(){
move(oDiv,'left',,) //最后一个回调函数可以不传
};
function getStyle(obj,name){
if(obj.currentStyle){ //有当前样式的时候
return obj.currentStyle[name];  //返回当前的样式自带单位 只兼容chrome firefox
}else{
return getComputedStyle(obj,false)[name];  //一样的 只兼容 IE
};
};

这次的只是匀速运动的。下次分享变速的  哈哈~

关于tween.js 封装的方法的更多相关文章

  1. js封装的方法

    1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...

  2. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  3. js 封装trim()方法,去掉空格

    <script> //定义一个对象 - 名字是$ var $$ = function() {}; //原型 $$.prototype = { $id:function(id) { retu ...

  4. 【实践】js封装 jq siblings 方法

    思路: 1.获取调用元素的父元素下的所有子元素(即它的所有同辈元素和调用元素本身) 2.遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面 代码如下: <!DOCTYPE ...

  5. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  6. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  7. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...

  8. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  9. tween.js

     简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...

随机推荐

  1. shopping_cart

    #!/usr/bin/env python # -*- coding: utf-8 -*- print('欢迎土豪光临随心所欲旗舰店') user_money = int(input('老板,请输入你 ...

  2. UNIX 系统概述

    UNIX体系结构(UNIX Architecture) 调用内核的接口叫做系统调用(system call,图1.1中的阴影部分),普通函数库是建立在系统调用接口的基础之上.应用(applicatio ...

  3. HDU4704Sum 费马小定理+大数取模

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4704 题目大意: 看似复杂,其实就是求整数n的划分数,4=1+1+2和4=1+2+1是不同的.因而可 ...

  4. 使用maven根据JSON文件自动生成Java POJO类(Java Bean)源文件

    根据JSON文件自动生成Java POJO类(Java Bean)源文件 本文介绍使用程序jsonschema2pojo来自动生成Java的POJO类源文件,本文主要使用maven,其他构建工具请参考 ...

  5. Java 通过先序后序序列生成二叉树

    题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...

  6. 3、J2EE学习推荐书籍

    3.J2EE学习推荐书籍       J2EE的学习应该循序渐进,一本好书会很快上手和深入.在学习J2EE之前,应该学好SQL,基本上,程序设计都会跟数据库打交道.如果SQL没学好,就如同房子没有基脚 ...

  7. 解决ubuntu的gedit显示中文乱码问题

    http://www.cnblogs.com/zhcncn/p/4032321.html

  8. mysql数据库小常识

    什么是数据库? 计算机处理和存储的一切信息都是数据. 计算机系统中一种用于存储数据的程序. 一种:计算机系统中有很多种能够存取数据的程序. 他们各有特长和长处,有自己的适用范围. 存取:能够保存数据避 ...

  9. Factoextra R Package: Easy Multivariate Data Analyses and Elegant Visualization

    factoextra is an R package making easy to extract and visualize the output of exploratory multivaria ...

  10. 学习笔记TF016:CNN实现、数据集、TFRecord、加载图像、模型、训练、调试

    AlexNet(Alex Krizhevsky,ILSVRC2012冠军)适合做图像分类.层自左向右.自上向下读取,关联层分为一组,高度.宽度减小,深度增加.深度增加减少网络计算量. 训练模型数据集 ...