<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}

 #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}

 #img1 { opacity: 0.3; miaov: 妙味; filter: alpha(opacity=30); margin-left: 200px;}

 </style>

 <script>

 window.onload = function() {

     var oDiv1 = document.getElementById('div1');

     var oDiv2 = document.getElementById('div2');

     var oImg = document.getElementById('img1');

     //var iTimer = null;

     oDiv1.onmouseover = function() {

         startMove(this, 'left', 0, 10);

     }

     oDiv1.onmouseout = function() {

         startMove(this, 'left', -100, -10);

     }

     oImg.onmouseover = function() {

         startMove(this, 'opacity', 100, 10);

     }

     oImg.onmouseout = function() {

         startMove(this, 'opacity', 30, -10);

     }

     function startMove(obj, attr, iTarget, iSpeed) {

         clearInterval(obj.iTimer);

         var iCur = 0;

         obj.iTimer = setInterval(function() {

             if (attr == 'opacity') {

                 iCur = Math.round(css( obj, 'opacity' ) * 100);

             } else {

                 iCur = parseInt(css(obj, attr));

             }

             if (iCur == iTarget) {

                 clearInterval(obj.iTimer);

             } else {

                 if (attr == 'opacity') {

                     obj.style.opacity = (iCur + iSpeed) / 100;

                     obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';

                 } else {

                     obj.style[attr] = iCur + iSpeed + 'px';

                 }

             }

         }, 30);

     }

     function css(obj, attr) {

         if (obj.currentStyle) {

             return obj.currentStyle[attr];

         } else {

             return getComputedStyle(obj, false)[attr];

         }

     }

 }

 </script>

 </head>

 <body>

     <div id="div1">

         <div id="div2">分享到</div>

     </div>

     <img src="1.jpg" id="img1" />

 </body>

 </html>

简单的JS多物体的运动---运动和透明度的变化的更多相关文章

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

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

  2. 原生JavaScript运动功能系列（三）：多物体多值运动

    多物体同时出发运动函数实现 多属性同步运动变化实现 一.多物同时触发运动函数实现 前面两个动画示例基本理解了动画的核心:位置变化和速度变化,操作的核心就是定时器分段叠加属性值.但是动画还是基于单个元素 ...

  3. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  4. JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

  5. js多物体多方向缓动动画加带有回调机制

    一.获取一组div元素 var boxs = document.getElementsByTagName('div'); 二.封装获取属性值的函数 function getStyle(dom, att ...

  6. three.js中物体旋转实践之房门的打开与关闭

    看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵.欧拉角.四元数). ok,下面正式切入主题,房门的打开和关闭,先上图: 正如你所看到的那样,这个“房门”已经被打开了. 一.th ...

  7. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  8. 第一百四十二节，JavaScript，封装库--运动动画和透明度动画

    JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...

  9. js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝

    一.一个简单的js方法实现集合拷贝 做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举 ...

随机推荐

  1. “stdafx.h”: No such file or directory

    “stdafx.h”: No such file or directory 一般原因是建工程的时候选择了空工程,然后添加现有源文件(含stdafx.cpp) 或者 修改了已有的stdafx.cpp 或 ...

  2. Argument list too long......

    作为一名运维人员来说,这个错误并不陌生,在执行rm.cp.mv等命令时,如果要操作的文件数很多,可能会使用通配符批量处理大量文件,这时就可能会出现“Argument list too long”这个问 ...

  3. Java垃圾回收以及内存分配

    http://www.cnblogs.com/ggjucheng/p/3977384.html http://www.blogjava.net/qcyycom/archive/2012/04/14/3 ...

  4. C++高精度计算代码运行时间(转载)

    转载:http://blog.csdn.net/rrrfff/article/details/6583410 //在定时前应该先调用QueryPerformanceFrequency()函数获得机器内 ...

  5. len字符串的长度

    #!/usr/bin/env python def fun4(x) : if len(x) > 2 : return print(x[0],x[1]) else: return 0 d = (' ...

  6. INSTALLMENT of QValue

    ############################################ INSTALLMENT############################################ ...

  7. C语言面试题（二）

    上篇对嵌入式中C语言基本数据类型,关键字和常用操作进行了汇总,这篇我们将侧重字符串操作.请看下面的字符串处理函数:    a.库函数    1)将字符串src拷贝到字符数组dest内        c ...

  8. 简单SSM配置详解

    SSM:spring+springMVC+Mybatis 学习网友的http://www.cnblogs.com/invban/p/5133257.html,并对其进行了详细的解说. 源码下载:htt ...

  9. yii2中gii外网访问的配置方法

    if (YII_ENV_DEV) { // configuration adjustments for 'dev' environment $config['bootstrap'][] = 'debu ...

  10. linux详细redis安装和php中redis扩展

    第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...