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 ...
随机推荐
- tomcat的webappclassloader中一个奇怪的异常信息
假设一个应用抛出大量的Class not found信息,一般你会怀疑包冲突.但是tomcat的webappclassloader却有这种问题: 假设一个应用公布出现故障, webappclasslo ...
- mahout贝叶斯算法开发思路(拓展篇)2
如果想直接下面算法调用包,可以直接在mahout贝叶斯算法拓展下载,该算法调用的方式如下: $HADOOP_HOME/bin hadoop jar mahout.jar mahout.fansy.ba ...
- 用nodejs安装hexo,将hexo部署到github
跌跌撞撞写这篇博文,希望下一篇可以好点 运行环境:最新版本的nodejs + git 安装好nodejs 和 git ,注册好github账号,新建仓库****.github.io(****为gith ...
- Delete website with command.
1.AppCmd.exe 2.http://www.windowsnetworking.com/articles-tutorials/windows-server-2008/Configuring-I ...
- 驱动: i2c驱动 >>>>
1. IIC协议: <<um_s3c2440a_rev10.pdf>> p481 Figure 20-3. IIC-Bus Interface Data Format< ...
- Longest Palindromic Substring - 一题多解
题意是寻找一个字符串的最大回文字串,最简单的是n3方的算法,由于字符串最大长度为1000,所以这个方法很危险而且不科学. 紧接着想到的是一个n方的算法:回文子串是从中间向两边产生的,那么对于每个字符考 ...
- C语言新学备忘_1
#include <stdio.h> //C语言的标准输入 ,输出头文件扩展名为.h的文件称为头文件 //include称为文件包含命令 #include <stdlib.h> ...
- VPN各种方案
http://www.maimiaovpn.com 大家都是用什么方法FQ的?我原来用的XskyWalker浏览器 但我用的电信网现在不行了.大家用的什么方法可否告诉我一下我用yes-vpn,10元一 ...
- app添加辅助功能时,需要注意的测试点
最近项目里需要在辅助功能添加对应的服务,来支持对应的功能实现: 1.对用户添加app进行信息管理功能中,该app有对应的通知或信息时在app的logo上显示提示标志. 2.用户下载一款app后能够自动 ...
- android串行化getSerializable、getSerializableExtra
android串行化getSerializable.getSerializableExtra 传参 总结 案例1 不用 Bundle 封装数据 提交activity lst.setOnItemClic ...