1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset = "utf-8">
  5.         <title>未命题</title>
  6.         <style>
  7.             *{margin: 0;
  8.                 padding: 0;
  9.             }
  10.             #div1{
  11.                 height: 200px;
  12.                 width: 150px;
  13.                 background: red;
  14.                 position:absolute;
  15.                 top:50px;
  16.                 left: -150px;
  17.             }
  18.             #div2{
  19.                 height: 50px;
  20.                 width: 20px;
  21.                 background: black;
  22.                 color: white;
  23.                 position:absolute;
  24.                 top:100px;
  25.                 right:-20px;
  26.                 line-height: 25px;
  27.                 cursor: pointer;
  28.             }
  29.             img{
  30.             margin-left: 200px;
  31.             opacity: 0.3;
  32.             alpha(opacity = 30);
  33.             }
  34.         </style>
  35.         <script>
  36.             window.onload = function ()
  37.             {
  38.                 odiv1 = document.getElementById('div1');
  39.                 odiv2 = document.getElementById('div2');
  40.                 oimg = document.getElementById('img1');
  41.  
  42.                 odiv1.onmouseover= function ()
  43.                 {
  44.                     startMove(this,'left',0,10);
  45.                 }
  46.  
  47.                 odiv1.onmouseout = function ()
  48.                 {
  49.                     startMove(this,'left',-150,-10);
  50.                 }
  51.  
  52.                 oimg.onmouseover = function ()
  53.                 {
  54.  
  55.                     startMove(this,'opacity',100,10);
  56.                 }
  57.  
  58.                 oimg.onmouseout = function ()
  59.                 {
  60.                     startMove(this,'opacity',30,-10);
  61.                 }
  62.  
  63.                 function startMove (obj,attr,goal,speed)
  64.                 {
  65.                     clearInterval(obj.timer);
  66.                     var icur = 0;
  67.  
  68.                     obj.timer = setInterval(function(){
  69.                         if(attr == 'opacity')
  70.                         {
  71.                             icur = Math.round(css(obj,'opacity')*100);
  72.                         }
  73.                         else
  74.                         {
  75.                             icur = parseInt(css(obj,attr))
  76.                         }
  77.  
  78.                         if(icur == goal)
  79.                         {
  80.                             clearInterval(obj.timer);
  81.                         }
  82.                         else
  83.                         {
  84.                             if(attr == 'opacity')
  85.                             {
  86.                                 obj.style.opacity = (icur + speed )/100;
  87.                                 obj.style.filter = 'alpha(opacity = '+ (icur + speed ) +')';
  88.                             }
  89.                             else
  90.                             {
  91.                                 obj.style[attr] = icur + speed + 'px';
  92.                             }
  93.                         }
  94.                     },30);
  95.                 }
  96.  
  97.                 function css(obj,attr)
  98.                 {
  99.                     if(obj.currentStyle)
  100.                         return obj.currentStyle[attr];
  101.                     else
  102.                         return getComputedStyle(obj,false)[attr];
  103.                 }
  104.  
  105.             }
  106.         </script>
  107.     </head>
  108.     <body>
  109.  
  110.         <div id="div1"><div id="div2">分享</div></div>
  111.         <img id="img1" src = "img/1.jpg">
  112.  
  113.     </body>    
  114.  
  115. </html>

js 多物体运动的更多相关文章

  1. js多物体运动之淡入淡出效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. JS多物体运动案例：变宽、变高

    任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px ...

  3. js多个物体运动问题2

    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...

  4. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  5. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  6. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  7. JS多物体宽度运动案例

    任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...

  8. js动画之多物体运动

    多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

随机推荐

  1. poj - 1258 Agri-Net (最小生成树)

    http://poj.org/problem?id=1258 FJ为了竞选市长,承诺为这个地区的所有农场联网,为了减少花费,希望所需光纤越少越好,给定每两个农场的花费,求出最小花费. 最小生成树. # ...

  2. java socket编程基础

    1. [代码]读操作Runable 1 package com.hrd.test.socket; import java.io.BufferedReader; import java.io.IOExc ...

  3. 51nod1434 区间LCM

    将n!标准分解.m!/n!必定需要包含n!的分解式.对于每个质数枚举最小的答案,然后总的取最大. #include<cstdio> #include<cstring> #inc ...

  4. The Guide To Understanding mysqlreport

    The Guide To Understanding mysqlreport This guide to understanding mysqlreport explains everything t ...

  5. Python内置数据类型之Dictionary篇

    1.查看函数XXX的doc string. Python的函数是有属性的,doc string便是函数的属性.所以查看函数XXX的属性的方法是模块名.XXX.__doc__ 2.模块的属性 每个模块都 ...

  6. 基于jquery框架的ajax搜索显示

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. Ensemble Learning 之 Bagging 与 Random Forest

    Bagging 全称是 Boostrap Aggregation,是除 Boosting 之外另一种集成学习的方式,之前在已经介绍过关与 Ensemble Learning 的内容与评价标准,其中“多 ...

  8. php flock注意事项

    对于实际的运用,必须将其添加到所有使用的文件脚本中 但注意:其函数无法再NFS或其他网络文件系统中使用也无法在多线程服务器API中使用.

  9. Java 中的二维数组

    所谓二维数组,可以简单的理解为是一种“特殊”的一维数组,它的每个数组空间中保存的是一个一维数组. 那么如何使用二维数组呢,步骤如下: 1. 声明数组并分配空间 或者 如: 2. 赋值 二维数组的赋值, ...

  10. 如何正确选择MySQL数据列类型

    MySQL数据列类型选择是在我们设计表的时候经常会遇到的问题,下面就教您如何正确选择MySQL数据列类型,供您参考学习. 选择正确的数据列类型能大大提高数据库的性能和使数据库具有高扩展性.在选择MyS ...