javascript:运动框架
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function(){
var bStop=true; //定义全部完成标志
for(var attr in json)
{
var curr='';
if(attr=='opacity') //运动如果是透明度
{
curr=Math.round(parseFloat(_css(obj,'opacity'))*100);
}
else //其他运动情况
{
curr =parseInt(_css(obj,attr));
} //计算速度 基数为6,基数越大,速度越慢
var speed =(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed); //速度:大于0的向上去整,小于0的向下取整
if(curr!=json[attr])//有一项运动没有完成就为false
{
bStop=false;
}
if(attr=='opacity') //运动如果是透明
{
obj.style.filter='alpha(opacity:'+(curr+speed)+')';
obj.style.opacity=(curr+speed)/100;
}
else
{
obj.style[attr]=curr+speed+'px';
}
} if(bStop)
{
clearInterval(obj.timer);
if(fnEnd) //如果有callback函数
{
fnEnd();
}
}
},30);
}
javascript:运动框架的更多相关文章
- javascript运动框架(三)
迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- 【repost】JavaScript运动框架之速度时间版本
一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...
- 【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
- javascript运动框架
下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...
- JavaScript 运动框架 Step by step(转)
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...
- javaScript运动框架之匀速运动
运动框架 1.在开始运动时,关闭已有定时器 2.把运动和停止隔开(if/else) 匀速运动的停止条件 运动终止条件:距离足够近 Demo代码 <!DOCTYPE html> <ht ...
- JavaScript 运动框架
<script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.o ...
- javascript运动框架(二)
紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){ var div = document.getE ...
- 适用于CSS2的各种运动的javascript运动框架
<script> window.onload = function() { //var oDiv1 = document.getElementById('box1'); //var oDi ...
随机推荐
- 织梦dede标签tags的美化教程
我们在行dede仿站的时候,经常会遇到tags标签的调用,调用非常简单,官方有专门的调用标签,但是官方的调用是一成不变的模式,dede5.6以前的版本,基本上都是黑色相同大小的表示,而在dede5.7 ...
- DeDe友情链接
图片 {dede:flink row="} [field:link /] {/dede:flink} 文字 {dede:flink row="} [field:link /] {/ ...
- python种的builtin函数详解-第三篇
exec_stmt ::= "exec" or_expr ["in" expression ["," expression]] eval(e ...
- USACO1.5 Checker Challenge(类n皇后问题)
B - B Time Limit:1000MS Memory Limit:16000KB 64bit IO Format:%lld & %llu Description E ...
- maven3.0
Maven入门教程 1.1. 介绍.环境配置 1.1.1. Maven介绍 Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model ...
- C#.Net参数
C#.Net参数 阅读目录 引言 形参和实参 命名实参 可选参数 params,数目可变参数 方法解析与重载决策 参数传递 [重难点] ref引用参数/out输出参数 参数修饰符 泛型类 ...
- InstallShield FEQ
Q: 如何替换setup.exe的图标? A: 这不是一个推荐的操作,因为可能会引起不可预见的错误,而且IS没有开放这个接口.如果你坚持要这么做,可以使用第三方软件比如ExeScope来进行图标替换. ...
- centos7 install mysql
1. 下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2. 安装mysql-co ...
- LayerDrawable 资源
与 StateListDrawable 有点类似,LayerDrawable 也可包含一个 Drawable 数组,因此系统 将会按这些 Drawable 对象的数组顺序来绘制它们,索引最大的 Dra ...
- POJ 1122 FDNY to the Rescue! Floyd 打印路径就行了
题目大意: 纽约消防部门的支援速度是值得纽约人骄傲的一件事.但是他们想要最快的支援速度,帮助他们提升支援速度他们要调度离着火点最近的一个消防站.他们要你写一个程序来维护纽约消防站的光荣传统.软件需要有 ...