<!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. Android ToolBar

    众所周知,在使用ActionBar的时候,一堆的问题:这个文字能不能定制,位置能不能改变,图标的间距怎么控制神马的,由此暴露出了ActionBar设计的不灵活.为此官方提供了ToolBar,并且提供了 ...

  2. VS2012下基本类型大小

  3. Windows Store Apps, Error: The certificate specified has expired.（转）

    Windows Store Apps, Error: The certificate specified has expired. 0 comments|Posted on October 7th, ...

  4. USB port 如何识别不同的Charger类型

    基于Qualcom 8960/8921平台 一,软件分析 1.  USB charger types & Power supply types USB_INVALID_CHARGER      ...

  5. 断言（ASSERT）的用法

    我一直以为assert仅仅是个报错函数,事实上,它居然是个宏,并且作用并非“报错”. 在经过对其进行一定了解之后,对其作用及用法有了一定的了解,assert()的用法像是一种“契约式编程”,在我的理解 ...

  6. C#读取XML文件中有乱码的处理办法

    1.以文本的方式读取出xml内容 2.如果xml加载文本失败,替换掉乱码的内容 private static void loadxml(XmlDocument doc, string str) { t ...

  7. jquery之remove(),detach()方法详解

    一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove ...

  8. SQL Server 2012 管理新特性：AlwaysOn【转】

    http://jimshu.blog.51cto.com/3171847/871169 见超链接

  9. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

  10. python的类和对象——进阶篇

    写在前面的话 终于,又到了周五.当小伙伴们都不再加班欢欢喜喜过周末的时候,我刚刚写完这一周的游戏作业,从面对晚归的紧皱眉头到现在的从容淡定,好像只有那么几周的时间.突然发现:改变——原来这么简单.很多 ...