javascript每日一练(十二)——运动框架
运动框架
可以实现多物体任意值运动
例子:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha(opacity=30);} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, {width:200, height:200, opacity:100}, function(){ startMove(oDiv, {width:100, height:100, opacity:30}); }); }; }; function getStyle(obj, attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ iCur = Math.round(parseFloat(getStyle(obj, attr))*100); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur)/8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur != json[attr]){ bStop = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+(iCur+iSpeed)+')'; obj.style.opacity = (iCur+iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bStop){ clearInterval(obj.timer); if(fn){ fn(); } } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="运动"/> <div id="div1"></div> </body> </html>
javascript每日一练(十二)——运动框架的更多相关文章
- javascript每日一练(二)——javascript(函数,数组)
一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2, ...
- J2EE进阶(十二)SSH框架整合常见问题汇总(三)
在挂失用户时,发现userid值为空,但是在前台输入处理账号22时,通过后台输出可以看出,后台根据前端输入在数据库中查询到结果对象并输出该对象的userid,而且Guashi对象也获取到了其值. 解决 ...
- JavaScript -- 时光流逝(十二):DOM -- Element 对象
JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练(九)——运动一:匀速运动
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
随机推荐
- HDU1284钱币兑换问题( 母函数打表)
题意:在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法. 原题http://acm.hdu.edu.cn/showproblem.php?pid=128 ...
- week4_motion_of_ball_1(小球运动)——改进
# Ball motion with an explicit timer import simplegui # Initialize globals width = 600 height = 600 ...
- 异常:cvc-complex-type.2.4.a: Invalid content was found starting with element
web.xml 出现cvc-complex-type.2.4.a: Invalid content was found starting with element <web-app xmlns= ...
- swift + xcode 新手上路
有用的参考博文: 视频教程: 如何创建第一个iPhone App - HelloWorldHelloWorld 熟悉xcode: http://www.cocoachina.com/swift/201 ...
- CBV进阶(一)
http_method_names , http_method_not_allowd 用途:views只接受这些请求. 范围View Default:['get', 'post', 'put', 'p ...
- jQuery tablesort插件推荐
搜索结果的第一条网址(似乎是Official Site)似乎有问题(也可能是我弄错了 总之chrome中有个叉叉) 所以还是用这个吧http://mottie.github.io/tablesort ...
- 一个i++和++i导致的严重的错误
当我曾经在写一个strlen的实现时,用递归写出了如下的代码: int strlen(const char *s) { if(*s=='\0') ; else ; } 程序一运行就崩溃了,why!都是 ...
- IT第十八天 - 类的封装、继承、重载、上周总结★★★
IT第十八天 上午 封装 1.关键字this,是表示该类在实例化时的对象,即this.表示为该对象的属性 2.类的数据保护,set.get方法的写法规则,为了之后的反射机制的读取数据,set方法中对于 ...
- 解题报告 HDU1176 免费馅饼
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- Eddy's爱好(dfs+容斥)
Eddy's爱好 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...