javascript运动框架多物体运动---1
来源:互联网 发布:淘宝隐藏券怎么设置 编辑:程序博客网 时间:2024/04/29 08:23
<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } textarea { position: fixed; right: 0; top: 50px; } div { margin-top: 10px; width: 100px; height: 30px; background: red; border: 1px solid green; cursor: pointer; } </style></head><body style="height:3000px;"> <textarea name="" id="" cols="30" rows="10"></textarea> <div>div1</div> <div>div2</div> <div>div3</div> <script src="test.js"></script> <script> window.onload = function() { var oDiv1 = document.getElementsByTagName('div'); for (var i = 0; i < oDiv1.length; i++) { // 给每个元素对象设置一个定时器 // 用来结局定时器公用的问题 oDiv1.timer = null; oDiv1[i].onmouseover = function() { move(this, 400); }; oDiv1[i].onmouseout = function() { move(this, 100); }; } } </script></body>/** * [getStyle 获取计算出来的样式] * @param {[type]} obj [元素对象] * @param {[type]} attr [属性名] * @return {[type]} [对应属性名的值] */function getStyle(obj, attr) { if (obj.currentStyle) { // IE return obj.currentStyle[attr]; } else { // 其他 return getComputedStyle(obj, false)[attr]; }}function move(obj, target) { // 多物体运动,解决公用定时器的问题 // 不仅仅是定时器,多物体运动所有东西都不能公用 clearInterval(obj.timer); obj.timer = setInterval(function() { var width = parseInt(getStyle(obj, 'width')); var speed = (target - width) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (width == target) { clearInterval(obj.timer); } else { obj.style.width = width + speed + 'px'; } document.getElementsByTagName('textarea')[0].value += parseInt(getStyle(obj, 'width')) + '\n'; }, 30);}
0 0
- javascript运动框架多物体运动---1
- javascript运动框架多物体运动---1
- Javascript运动概念2——多物体运动框架
- JavaScript运动框架(三):多物体任意值运动
- javascript 多物体任意运动框架
- 多物体运动框架
- js-多物体运动框架
- javascript运动框架---1
- Javascript物体运动(单物体运动)
- 物体运动框架
- JavaScript物体运动一
- JavaScript物体运动二
- JavaScript物体运动三
- js运动-多物体运动
- 42、JavaScript的运动----多个物体同时运动
- 多物体,任意值运动框架
- 多物体任意值运动框架
- js实现多物体不同运动框架
- 解决问题的方法
- leetcode Factorial Trailing Zeroes非负整数阶乘后尾0个数
- poj 2187 旋转卡壳(平面上最远点对)
- 常用的sql语句
- 杂谈_如何让VS2013开发的MFC程序运行在XP系统下
- javascript运动框架多物体运动---1
- Android启动Service
- Bootstrap的js插件之模态框(modal)
- hdu1556 线段树更新区间
- Qt信号与槽机制(signal & slot)
- Android 应用App测试流程
- 9.3栈和队列(四)——堆盘子
- 单buffer,双buffer和三buffer的区别
- tcp retransmission问题