JavaScript 智能社 完美运动框架
简约版:
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
} function startMove(obj, attr, iTarget, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=0; if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
} var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget)
{
clearInterval(obj.timer); if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}
完整版:
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
} //startMove(oDiv, {width: 400, height: 400}) function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设:所有值都已经到了 for(var attr in json)
{
var cur=0; if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
} var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr])
bStop=false; if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
} if(bStop)
{
clearInterval(obj.timer); if(fnEnd)fnEnd();
}
}, 30);
}
JavaScript 智能社 完美运动框架的更多相关文章
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- 完美运动框架(js)
一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- 2015.8.2js-19(完美运动框架)
/*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- JavaScript 基础入门11 - 运动框架的封装
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...
随机推荐
- Linux安装详情图解
本文讲解Linux的安装 因为是纯属学习使用,所以安装在了虚拟机里 需要软件: VirtualBox-5.1.10 ubuntu-16.04.1-desktop-amd64 说明: 虚拟机可以选择 ...
- 一种面向对象的TCP/IP中间件
这是一个使用C++封装的TCP/IP协议栈(仅传输层),属于本人所设计的中间件的一员,具有硬件无关,应用无关特性,使用非常方便,一看代码便知: #include "net.h" / ...
- 地图四叉树一般用在GIS中,在游戏寻路中2D游戏中一般用2维数组就够了
地图四叉树一般用在GIS中,在游戏寻路中2D游戏中一般用2维数组就够了 四叉树对于区域查询,效率比较高. 原理图
- ngx_http_proxy_module模块.md
ngx_http_proxy_module ngx_http_proxy_module模块允许将请求传递到另一个服务器. proxy_bind Syntax: proxy_bind address [ ...
- PAT 1047. 编程团体赛(20)
编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...
- ASP.NET Core MVC 在linux上的创建及发布
前言 ASP.NET core转眼都发布半月多了,社区最近也是非常活跃,虽然最近从事python工作,但也一直对.NET念念不忘,看过了园区大神们搭建的Asp.net core项目之后,自己也是跃跃欲 ...
- CSS布局
1流动模型 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块 ...
- Theano conv2d的border_mode
文档是这么写的: border_mode: str, int or tuple of two int Either of the following: ``'valid'``: apply filte ...
- 【Codeforces 738D】Sea Battle(贪心)
http://codeforces.com/contest/738/problem/D Galya is playing one-dimensional Sea Battle on a 1 × n g ...
- BZOJ 2716: [Violet 3]天使玩偶
2716: [Violet 3]天使玩偶 Time Limit: 80 Sec Memory Limit: 128 MBSubmit: 1473 Solved: 621[Submit][Statu ...