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" ...
随机推荐
- arm指令集
http://blog.chinaunix.net/uid-20769502-id-112445.html
- 带分页、过滤条件的DSL
"query": { "bool": { "must_not": { "match_phrase": { "p ...
- cdh 安装记录
安装文件准备 CDH 下载地址:http://archive.cloudera.com/cdh5/parcels/latest/ 下载操作系统对应的版本: 1.CDH-5.3.0-1.cdh5.3.0 ...
- Linux的一些简单命令(三)
1.解压缩算法:使用gzip算法进行解压缩, 压缩语法:gzip filename 解压语法:gzip -dv filename 2.解压缩算法:使用bzip2算法进行解压缩, 压缩语法:bz ...
- HTTP 错误 403.14 - Forbidden的解决办法
错误: HTTP 错误 403.14 - ForbiddenWeb 服务器被配置为不列出此目录的内容. 原因: 出现这个错误,是因为默认文档中没有增加index.aspx导致的. 解决方法: 打开 ...
- 递归——CPS(一)
程序中为什么需要栈stack? 普通的程序中,接触到子程序和函数的概念,很直观地,调用子程序时,会首先停止当前做的事情,转而执行被调用的子程序,等子程序执行完成后,再捡起之前挂起的程序,这有可能会使用 ...
- 洛谷-统计数字-NOIP2007提高组复赛
题目描述 Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照 ...
- [Jmeter]jmeter之脚本录制与回放,优化(windows下的jmeter)
一.录制脚本: 1.启动jmeter 2.添加线程组 3.添加http代理 4.配置代理 a.jmeter侧(注意:lest plan content这里需要选择目标控制器,本文即测试计划中需要选择的 ...
- EntityFramework批量Insert
先说解决办法:使用SqlBulkCopy. 然后问题是:这个和EF没有半点关系,还要拼DataSet. 再是解决办法:你可以自己封装一个,也可以使用人家写好的 EntityFramework.Bulk ...
- ubuntu14.04下安装ice3.5.1
ubuntu 14.04下是可以通过下面这条指令安装ice3.5的 sudo apt-get install libzeroc-ice35-dev 1. 从这里下载ice源文件 主要包括两部分:ice ...