完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了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 之完美运动框架的更多相关文章

  1. JS 之完美运动框架 如何同时改变元素多个属性?

    正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...

  2. JS完美运动框架

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

  3. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...

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

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

  5. 【repost】JavaScript完美运动框架的进阶之旅

    运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...

  6. JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...

  7. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

  8. Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  9. 原生JS封装animate运动框架

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. svn客户端的安装与中文版本语言库

    首先在mac下下载svn或者其他软件请看另一篇博客链接:http://www.cnblogs.com/minyc/p/myc201606191543.html 另附svn常用命令操作详解:http:/ ...

  2. android下拉刷新控件 android-pulltorefresh

    运行效果: 介绍:ListView.ViewPager.WevView.ExpandableListView.GridView.(Horizontal)ScrollView.Fragment上下左右拉 ...

  3. 在vim编辑器中,删除操作

    我这里在编辑一个很大的文件,有几万行,都是文件名sheetid, 中间有很多空行,我现在要做的事情就有要把这个文件中的空行都删除掉,这个本来想在ultraedit里面完成的,结果弄了好半天都没有搞定, ...

  4. moodle笔记之-数据库操作

    <?php require_once('../config.php'); // config.php under root folder require_once($CFG->dirroo ...

  5. UltraISO PE(软碟通) V9.5.5.2960 官方中文版

    软件名称: UltraISO PE(软碟通)软件语言: 简体中文授权方式: 免费试用运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 1.9MB图片预览: 软件简介 ...

  6. Java之JSP基础语法

    1.JSP页面元素简介及page指令     2.JSP注释,3种不同注释 <!--  我是HTML注释,在客户端可见 --> <%--我是JSP注释,在客户端不可见 --%> ...

  7. THML结构语义化之table/form

    以table/form标签语义化,做为博客首贴 应用场景1-table表格 <table> <caption> <thead> <th colspan=&qu ...

  8. MFC窗口程序显示命令行输出窗口的方法

    来源:http://blog.csdn.net/k_shmily/article/details/52596927 WINDOWS为你提供了一系列的API来完成这个功能,例如:ReadConsole, ...

  9. CVE-2015-0057 POC构造 & 利用分析(2015.7)

    CVE-2015-0057 POC构造 & 利用分析 主要内容: 构造POC 利用思路 0x00 初探 从这篇文章可以获知: 1.问题出在 win32k!xxxEnableWndSBArrow ...

  10. SQL语句优化技术分析 整理他人的

    一.操作符优化 1.IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格.但是用IN的SQL性能总是比较低的,从Oracle执行的步骤来分析用IN的SQL与不用 ...