关于tween.js 封装的方法
今天做的是匀速情况下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 封装的方法的更多相关文章
- js封装的方法
1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- js 封装trim()方法,去掉空格
<script> //定义一个对象 - 名字是$ var $$ = function() {}; //原型 $$.prototype = { $id:function(id) { retu ...
- 【实践】js封装 jq siblings 方法
思路: 1.获取调用元素的父元素下的所有子元素(即它的所有同辈元素和调用元素本身) 2.遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面 代码如下: <!DOCTYPE ...
- 利用tween.js算法生成缓动效果
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 原生js封装的一些jquery方法
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- tween.js
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...
随机推荐
- shopping_cart
#!/usr/bin/env python # -*- coding: utf-8 -*- print('欢迎土豪光临随心所欲旗舰店') user_money = int(input('老板,请输入你 ...
- UNIX 系统概述
UNIX体系结构(UNIX Architecture) 调用内核的接口叫做系统调用(system call,图1.1中的阴影部分),普通函数库是建立在系统调用接口的基础之上.应用(applicatio ...
- HDU4704Sum 费马小定理+大数取模
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4704 题目大意: 看似复杂,其实就是求整数n的划分数,4=1+1+2和4=1+2+1是不同的.因而可 ...
- 使用maven根据JSON文件自动生成Java POJO类(Java Bean)源文件
根据JSON文件自动生成Java POJO类(Java Bean)源文件 本文介绍使用程序jsonschema2pojo来自动生成Java的POJO类源文件,本文主要使用maven,其他构建工具请参考 ...
- Java 通过先序后序序列生成二叉树
题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...
- 3、J2EE学习推荐书籍
3.J2EE学习推荐书籍 J2EE的学习应该循序渐进,一本好书会很快上手和深入.在学习J2EE之前,应该学好SQL,基本上,程序设计都会跟数据库打交道.如果SQL没学好,就如同房子没有基脚 ...
- 解决ubuntu的gedit显示中文乱码问题
http://www.cnblogs.com/zhcncn/p/4032321.html
- mysql数据库小常识
什么是数据库? 计算机处理和存储的一切信息都是数据. 计算机系统中一种用于存储数据的程序. 一种:计算机系统中有很多种能够存取数据的程序. 他们各有特长和长处,有自己的适用范围. 存取:能够保存数据避 ...
- 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 ...
- 学习笔记TF016:CNN实现、数据集、TFRecord、加载图像、模型、训练、调试
AlexNet(Alex Krizhevsky,ILSVRC2012冠军)适合做图像分类.层自左向右.自上向下读取,关联层分为一组,高度.宽度减小,深度增加.深度增加减少网络计算量. 训练模型数据集 ...