javascript多物体运动实现方法分析


Posted in Javascript onJanuary 08, 2016

本文实例讲述了javascript多物体运动实现方法。分享给大家供大家参考,具体如下:

这里需要注意每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用

运行效果截图如下:

javascript多物体运动实现方法分析

例子:

<!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运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
js实现微博发布小功能
2017/01/12 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python内置模块collections知识点总结
2019/12/19 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python实现简单猜单词游戏
2020/12/24 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
工作态度不好检讨书
2015/05/06 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技