//获取非行间样式的封装
function setStyle(obj,name){
          // 考虑兼容性问题
if(obj.currentStyle){//不兼容火狐和谷歌
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];//不兼容IE
}
}
            function move(obj,json,complete) {
// 用计时器前先清除,防止多次点击
clearInterval(obj.timer);
// 设置complete的默认值
var complete=complete||{};//如果有就是用户传入的值,否则就是一个空对象
complete.dur=complete.dur||2000;//时间:如果有就是用户传入的值,否则默认2000
complete.easing=complete.easing||"linear";//运动方式:如果有就是用户传入的值,否则默认匀速
        //总步数=总时间÷计时器设定的时间
var count = parseInt(complete.dur / 30);
      //起始位置,先定义一个json
var start={};
      //总距离=传入的距离-起始距离
var dis={};
// 因为传入了多个起始目标和多个终点目标,所以先循环
for(name in json){
start[name]=parseFloat(setStyle(obj,name));
dis[name]=json[name]-start[name];
}
// 每步运动的距离=总距离÷总步数
// var spen = dis[name] / count;
// 定义起始步数
var n = 0;
obj.timer = setInterval(function () {
n++;
for(name in json){
var a=n/count;
switch(complete.easing){//判断
case "linear":
var cur=start[name] + a * dis[name];//起始位置+当前运动的距离*总距离÷总步数,数学中先乘后除或先除后乘结果都一样
break;
case "ease-in":
var cur=start[name] + Math.pow(a,3) * dis[name];
break;
case "ease-out":
var a=1-n/count;
var cur=start[name] +(1-Math.pow(a,3)) * dis[name];
break;
}
// 把当前运动的位置保存 // 判断属性是不是透明度,透明度不用加单位
if(name=='opacity'){
obj.style[name]=cur;
// 兼容IE低版本,IE的透明度是1到100
obj.style.filter='alpha('+cur*100+')';
}else {
obj.style[name] = cur + "px";
}
} // 判断运动是否完成
if (n == count) {
// 完成后清除定时器,停止运动
clearInterval(obj.timer);
// 判断用户是否传入回调函数
complete.fn && complete.fn();
}
}, 30);
}
     

js中运动框架的封装的更多相关文章

  1. node.js中的框架

    node.js中的框架 载自: http://nodeframework.com/ MVC frameworks Sinatra-like These frameworks offer rich co ...

  2. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  3. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

  4. js中Frame框架的属性获取(1)

    js中window和document对象及如何操作iframe 一. window对象 . 什么是window对象? Window对象表示浏览器打开的窗口.如果文档包含iframe或者是frame标签 ...

  5. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  6. JS完美运动框架【利用了Json】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

  8. JS中OOP之模拟封装和继承和this指向详解

    大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...

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

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

随机推荐

  1. 【代码学习】GD库中图片缩印

    bool imagecopyresampled ( resource $dst_image, resource $src_image, int $dst_x, int $dst_y, int $src ...

  2. ZJOI2017 day1滚粗记

    这几天去温州作为外省选手参加了$ZJOI day1$.打了几天的酱油,考试也滚粗了.. $day -2$ 中午从学校出发,坐飞机去温州.到了温州以后吃完晚饭就回宾馆.把一直想做的糖果公园做完了以后就堕 ...

  3. 运行出错之未能加载文件或程序集“Microsoft.ReportViewer.Common, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91”或它的某一个依赖项。系统找不到指定的文件。文件名:“Microsoft.ReportViewer.Common, Version=11.0.0.0,

    这个问题是因为在项目中缺少Microsoft.ReportViewer.Common程序集. 方法一:缺少哪些文件或程序集,到程序开发计算机下找到对应的烤到客户端的程序启动目录下即可(项目烤到Bin\ ...

  4. JavaScript 中有关Array操作的一些函数

    JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 0.222, 'Hi', null, ...

  5. Docker学习总结(一)

    <认识Docker> 不定期更新~~~~~~~ 历史区别: 13年之前:网络大多使用"协议栈堆叠"的形式进行开发,需要部署单一专有的服务器进行操作.包括(中间件,运行时 ...

  6. poj1011 搜索+剪枝

    DFS+剪枝 POJ2362的强化版,重点在于剪枝 令InitLen为所求的最短原始棒长,maxlen为给定的棒子堆中最长的棒子,sumlen为这堆棒子的长度之和,那么InitLen必定在范围[max ...

  7. jQuery 一个你意想不到的代码神器!

    jQuery 一个你意想不到的代码神器! jQuery 选择器.(最简单,最基本) jquery选择器的优势: (1) 简洁的写法,$()函数 (2)支持CSS1到CSS3选择器 (3)完善的处理机制 ...

  8. 学习笔记:javascript内置对象:字符串对象

    1.字符串的创建   var str = "Hello Microsoft!";   2.字符串属性   constructor  返回创建字符串属性的函数   length    ...

  9. Android 模块化探索与实践

    首发于<程序员>杂志五月刊 一.前言 万维网发明人 Tim Berners-Lee 谈到设计原理时说过:"简单性和模块化是软件工程的基石:分布式和容错性是互联网的生命." ...

  10. 分布式服务:Dubbo+Zookeeper+Proxy+Restful 分布式架构

    分布式 分布式服务:Dubbo+Zookeeper+Proxy+Restful 分布式消息中间件:KafKa+Flume+Zookeeper 分布式缓存:Redis    分布式文件:FastDFS ...