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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
浅析vue-router中params和query的区别
Dec 24 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
PHP 魔术函数使用说明
2010/05/14 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php压缩文件夹最新版
2018/07/18 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue 实现特定条件下绑定事件
2019/11/09 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
Python ljust rjust center输出
2008/09/06 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python使用递归的方式建立二叉树
2019/07/03 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
django 模型中的计算字段实例
2020/05/19 Python
html5时钟实现代码
2010/10/22 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
爱护花草树木的标语
2014/06/11 职场文书
开展读书活动总结
2014/06/30 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
初中差生评语
2014/12/29 职场文书
防卫过当辩护词
2015/05/21 职场文书
高一军训感想
2015/08/07 职场文书
2019求职信大礼包
2019/05/15 职场文书