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 ...
随机推荐
- 浮点与整形在GUI下的相关思考
平时不接触绘图,似乎感觉不到浮点和整形所带来的区别,这次项目中意外的碰到了浮点与整形进行迁移的工作.因此写点心得,让自己以后也可以看看. 用浮点作图有个最大的弊端就是边界情况,比如你需要在点(20,2 ...
- terminal命令
新建一个文件并写入内容: echo hello world > a.txt (每次echo都会重写文件) 新建文件: touch a.txt 新建目录: mkdir work 用vim打开文件 ...
- .net别样外观控件包DotNetBar
内容介绍:http://www.componentcn.com/?thread-6423-1.html BubbleBar应用: BubbleBar, DevComponents. Namesp ...
- python之路基础篇
基础篇 1.Python基础之初识python 2.Python数据类型之字符串 3.Python数据类型之列表 4.Python数据类型之元祖 5.Python数据类型之字典 6.Python Se ...
- python日期时间处理
time模块 #-*- coding: utf-8 -*- """ #获取当前时间的时间戳(单位秒) time.time() #推迟指定秒数后再运行 time.sleep ...
- nosql学习一
1.NoSQL,泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心,暴露了很多难 ...
- 使用UIImagePickerController时3DTouch引起的Crash问题的解决--备用
一.crash的场景 程序中用到UIImagePickerController时,如果在IPhone6S上运行APP,当forceTouch 一个图片时程序会crash,并附带如下crash mess ...
- LRU 算法简单实现
在学习很多服务器软件中,当内存不够,而需要淘汰内存的时候,一般会使用LRU算法,便产生了浓厚的兴趣.在学习操作系统的过程中发现LRU在系统中用寄存器和栈来实现.所以我就尝试着学习用栈来解决LRU的问题 ...
- 所有语言的Awesome
Awesome Awesomeness A curated list of amazingly awesome awesomeness. Also available on: Awesome-Awes ...
- Ubuntu 14.04 升级后 VPN 无法连接的问题
如果不知道怎么配置 VPN Server(IPSEC + L2TP),可以看这篇文章(英文). 问题表现: 将 Ubuntu 12.04 通过自动更新 —— do-release-upgrade —— ...