javascript每日一练(十一)——多物体运动
一、多物体运动
需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用;
例子1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);} </style> <script> window.onload = function() { var aDiv = document.getElementsByTagName('div'); aDiv[0].onmouseover = function() { startMove(this, 'width', 300); }; aDiv[0].onmouseout = function() { startMove(this, 'width', 100); }; aDiv[1].onmouseover = function() { startMove(this, 'height', 300); }; aDiv[1].onmouseout = function() { startMove(this, 'height', 100); }; aDiv[2].onmouseover = function() { startMove(this, 'opacity', 100); }; aDiv[2].onmouseout = function() { startMove(this, 'opacity', 30); }; aDiv[3].onmouseover = function() { startMove(this, 'borderWidth', 20); }; aDiv[3].onmouseout = function() { startMove(this, 'borderWidth', 1); }; }; function getStyle(obj, attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var iCur = 0; if(attr == 'opacity'){ iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur == iTarget){ clearInterval(obj.timer); }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')'; obj.style.opacity = (iCur+iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } }, 30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
javascript每日一练(十一)——多物体运动的更多相关文章
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- javascript每日一练(九)——运动一:匀速运动
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript学习-原生javascript的小特效(多物体运动效果)
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul> <li> ...
- javascript每日一练(一)——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练(八)——事件三:默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
随机推荐
- DataTable.AcceptChanges方法有何用处
提交自上次调用 AcceptChanges 以来对该表进行的全部更改. 调用 AcceptChanges 后,再用 DataAdapter.Update() 不会有不论什么新数据被更新到数据库中.那- ...
- UVA 11754 - Code Feat(数论)
UVA 11754 - Code Feat 题目链接 题意:给定一个c个x, y1,y2,y3..yk形式,前s小的答案满足s % x在集合y1, y2, y3 ... yk中 思路:LRJ大白例题, ...
- java--折半查找
/* 折半查找 */ class TwoSearch { //折半查找可以提高效率,但必须得保证是有序的数组 public static int halfSearch(int[] arr,int ke ...
- 前端笔试面试中的常用知识点总结(CSS)
1.CSS选择器的优先级!important > 内联 > id选择器 > 类选择器 > 标签选择器多个类选择器叠加(256)之后的优先级大于一个id选择器!importan ...
- 如何通过java反射将数据库表生成实体类?
首先有几点声明: 1.代码是在别人的基础进行改写的: 2.大家有什么改进的意见可以告诉我,也可以自己改好共享给其他人: 3.刚刚毕业,水平有限,肯定有许多不足之处: 4.希望刚刚学习java的同学能有 ...
- Dojo实现Tabs页报错(三)
用Dojo实现tab页的过程中,没有引用“on.js”,但是firebug调试时一直提示如下错误: on.js源码如下: define(["./has!dom-addeventlistene ...
- CoffeeScript 入门笔记
写在前面: 被英文版指南坑了...闹了很久才明白.coffee怎么用.安装前需要有稳定版 Node.js, 和 npm (Node Package Manager). 借助 npm 可以安装 Coff ...
- python成长之路16
阅读(72) 一:jQuery是一个兼容多浏览器的javascript类库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发, ...
- python成长之路9——socket和socketserver
IPC:进程间通信 本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 消息传递(管道.FIFO.消息队列) 同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 共享内存(匿名的和具 ...
- Linux学习:find、chmod、ps命令
下面介绍下linux下find.chmod.ps这三个常见命令的使用. 这每个命令都有很多可选的参数,不同参数体现的功能不一样.我们这里不一一介绍各种参数的含义,只介绍最常见的使用场景. 一.find ...