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 ...
随机推荐
- Android JNI入门第三篇——jni头文件分析
一. 首先写了java文件: public class HeaderFile { private native void doVoid(); native int doShort(); native ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- 纯CSS写九宫格样式,高宽自适应正方形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Mysql 查询 字符串 (索引和通配符)
需要查询的 Mission_Info 字段 值 CYVR-0220-1240-ZYTX-1415-1740-ZUUU-9999-9999-ZZZZ-9999-9999-ZZZZ SELECT M ...
- 字符串String类
1. String类是一个密封类.用关键字sealed修饰: 2. 字符串的两个特性: ·不可变性:string类型变量,一旦声明就表明它是不会被改变的.因此,string中的方法对strin ...
- Python学习之路——函数
一.Python2.X内置函数表: 注:以上为pyton2.X内置函数,官方网址:https://docs.python.org/2/library/functions.html 二.Python3. ...
- python 模块BeautifulSoup使用
BeautifulSoup是一个专门用于解析html/xml的库.官网:http://www.crummy.com/software/BeautifulSoup/ 说明,BS有了4.x的版本了.官方说 ...
- JavaEE Tutorials (5) - 运行企业bean示例
5.1cart示例56 5.1.1业务接口57 5.1.2会话bean类57 5.1.3@Remove方法61 5.1.4辅助类61 5.1.5运行cart示例615.2一个单例会话bean示例:co ...
- Android开发 第一篇
关于android开发,new项目通知: 之前的new -> android project,现在更改为new -> android application project,同学们可以继续 ...
- CoreAnimation (CALayer 动画)
CoreAnimation基本介绍: CoreAnimation动画位于iOS框架的Media层 CoreAnimation动画实现需要添加QuartzCore.Framework CoreAnima ...