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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue实现公共方法抽离
Jul 31 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
CURL状态码列表(详细)
2013/06/27 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
Javascript实现的分页函数
2006/12/22 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
Vee-Validate的使用方法详解
2017/09/22 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python 制作简单的音乐播放器
2020/11/25 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
摄影专业毕业生求职信
2014/08/05 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
php去除数组中为0的元素的实例分析
2021/11/17 PHP