js中运动框架的封装
//获取非行间样式的封装
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中运动框架的封装的更多相关文章
- node.js中的框架
node.js中的框架 载自: http://nodeframework.com/ MVC frameworks Sinatra-like These frameworks offer rich co ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- JavaScript 基础入门11 - 运动框架的封装
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...
- js中Frame框架的属性获取(1)
js中window和document对象及如何操作iframe 一. window对象 . 什么是window对象? Window对象表示浏览器打开的窗口.如果文档包含iframe或者是frame标签 ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- JS中OOP之模拟封装和继承和this指向详解
大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...
- JS中深浅拷贝 函数封装代码
一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...
随机推荐
- [KISSY5系列]KISSY5安装使用(一)
本文将从零开始安装KISSY环境 一.安装nodejs 从nodejs网站下载nodejs安装 地址: https://nodejs.org/en/download/ 二.下载KISSY 下载地址: ...
- static class - 静态类
通常一个普通类不允许声明为静态的,只有一个内部类才可以.这时这个声明为静态的内部类可以直接作为一个普通类来使用,而不需实例一个外部类. 如下代码所示: 1 public class StaticCls ...
- 为程序猿正名,MM们,你们为什么要找一个程序猿男票?【原创】
前言 免责声明:这篇文章关于什么?六一儿童节马上就要到了,作为一个前端攻城师,自我感觉效率还可以,老早已把任务搞完,页面布局和前端编码高效按时交付,呵呵.趁有时间,写写文章娱乐一下.MM们,请不要拿起 ...
- ASP.NET MVC知识点总结
一直都有把MVC的知识点总结出来的打算,今日终于得偿所愿.话不多说,开工!!! 一· MVC MVC设计模式->MVC框架(前端开发框架),asp.net(webform) aspx M:Mo ...
- angular.js的ui-router总结
ui-route 先有个网址,再在这个网址下写路由 子路由的搭建 我们的布局/模板文件 index.html 我们通过建立一个主文件来引入我们所需要的所有资源以开始我们的项目 ,这里 ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- 解决Cornerstone不能上传.a文件的问题 Cornerstone不上传*.xcuserstate,*.xcbkptlist文件
在使用CornerStone的时候经常会出现.a文件无法上传的问题,导致从svn checkout到本地的时候编译报错 这里可以通过配置CornerStone来达到上传.a文件的效果 操作步骤: 打开 ...
- Java生成二维码--QRGen
最近公司需求需要生成一个二维码 , 由于之前没有接触过 , 故此做个记录 . 在网上找到了不少二维码生成工具,都蛮好用的. 不过要集成二维码生成功能到应用开发中,就要选择最好用成熟的库了,最终决定采用 ...
- Apache许可翻译
https://www.apache.org/licenses/LICENSE-2.0 Apache许可 2.0 2004.1 使用.复制和发行的术语和条件. 1 定义 "License&q ...
- 码工具通过ICP备案
5月22日,为广大程序员造福的在线工具--码工具 通过了ICP备案,这也意味着本站也越来越正规化,规范化.大家从今日起就可以在网站底部看到本站的ICP备案号. 备案/许可证编号:粤ICP备170597 ...