JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率:
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
oDiv.onmouseover=function(){
move(this,{width:200,height:200});
}
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return currentStyle(obj)[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function move(obj,json,fn){
obj.timer=setInterval(function(){
for (var attr in json){
var iCur=0;
if (attr == 'opacity') {
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-iCur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (iCur == json[attr]) {
clearInterval(obj.timer);
fn&&fn();
}else{
obj.style[attr]=iCur+speed+'px';
}
}
},30);
}
JS 之完美运动框架的更多相关文章
- JS 之完美运动框架 如何同时改变元素多个属性?
正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- 完美运动框架(js)
一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...
- 2015.8.2js-19(完美运动框架)
/*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- 原生JS封装animate运动框架
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- Linux双网卡NAT共享上网
linux双网卡NAT共享上网 术语字汇 私有IP地址(路由不可达地址)是一个被用于本地局域网的IP地址(在互联网中不可见). 公用IP地址(路由可达地址)是一个在互联网中可见的IP地址. IP伪装是 ...
- 用python3实现linux的sed功能
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作.现在用python简单实现sed的主要命令,将old_text替换为ne ...
- mysql 异常处理
--该文章内容通过网络搜索组合, mysql 异常,可以自定义异常,再应用.也可使用系统默认的异常,捕获应用. 一.异常定义: DECLARE condition_name CONDITION FOR ...
- SAP HANA 中的决策表(Decision Table)
http://scn.sap.com/community/developer-center/hana/blog/2013/01/11/what-can-you-do-with-decision-tab ...
- AsyncHttpClient 中的重定向和 setEnableRedirects 方法异常解决
今天使用 AsyncHttpClient 开源库,遇到个很崩溃的问题: 方法 setEnableRedirects(false); 从名称上看应该是重定向开关的方法,设置为 false 后则普通请 ...
- fedora 使用trove的redstack 安装openstack环境
以下命令可能是你经常需要用到的: dnf list installed 列出所有dnf安装的包 dnf remove packagename 删除包 先获取trove-integration gi ...
- NOIP2015-普及组复赛-第一题-金币
题目描述 Description 国王将金币作为工资,发放给忠诚的骑士.第一天,骑士收到一枚金币:之后两天(第二天和第三天),每天收到两枚金币:之后三天(第四.五.六天),每天收到三枚金币:之后四天( ...
- 手机浏览器wap网页点击链接触发颜色区块的问题解决办法
引子 在做HTML5 WAP网页的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观.需求针对这种情况来问我,能否把这个一闪的颜色去掉.我当时就想,这个怎么去?那我也不好直接 ...
- 在mac安装numpy matplotlib scipy
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #fffff ...
- NYOJ-1057 寻找最大数(三)(贪心)
寻找最大数(三) 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 给出一个整数N,每次可以移动2个相邻数位上的数字,最多移动K次,得到一个新的整数. 求这个新的整数的 ...