<!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-Universal-Image-Loader的缓存处理机制

    讲到缓存,平时流水线上的码农一定觉得这是一个高大上的东西.看过网上各种讲缓存原理的文章,总感觉那些文章讲的就是玩具,能用吗?这次我将带你一起看过UIL这个国内外大牛都追捧的图片缓存类库的缓存处理机制. ...

  2. 浏览器URL编码

    jsp页面中通过请求另一个页面并通过url传递了带有中文的参数,结果在接收端获取参数时乱码了 经检查乱码现象指出新在IE浏览器中,其他浏览器火狐.chrome等不会有问题 最后的解决方式是: 手动将此 ...

  3. 。求推荐一个usb集线器的购买网址

    笔记本蓝屏了,虽然后来让笔记本自己呆了好久,它冷静下来后我重新启动它,它又恢复了正常,但是我至今也没搞懂蓝屏的原因,深切地领悟到没文化不可怕,像我这样一知半解的最可怕... ------LYQ --- ...

  4. HMI开发与控件

    =>控件是什么概念? 百度曰,控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者. 对于HMI开发来说,使用控件可以快速获取到用户的交互(包括按下.释放.点击.拖动 ...

  5. 从零开始CSS（一 2016/9/21）

    1.基础语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通 ...

  6. js给文本框赋值 value与innerHTML

    <input type="test" name="testName" id="testId"> 赋值操作: <script ...

  7. SPSS数据分析—重复测量差分析

    多因素方差分析中,每个被试者仅接受一种实验处理,通过随机分配的方式抵消个体间差异所带来的误差,但是这种误差并没有被排除.而重复测量设计则是让每个被试接受所有的实验处理,这样我们就可以分离出个体差异所带 ...

  8. python——协程

    由于python中的多线程比较特殊,所以协程的概念就变得尤为珍贵了,对于cpu密集型的操作,使用协程的效率无疑要好过多线程很多.因为协程的创建及其间切换的时间成本要低于线程很多.也因为这一点,很多人说 ...

  9. Sqlserver2012 中文乱码解决

    1.在Windows Azure的数据库中,如果选择默认字符编码,那么在创建表字段是,字符串类型应该为nvarchar,如果是varchar将会出现乱码,同样的的在sql语句中生命变量,也是需要将字符 ...

  10. sql注入基于错误-单引号-字符型

    查找注入点 在url中: 1. ' 2. and 1=1/and 1=2 3. 随即输入(整形) 4. -1/+1回显上下页面(整形) 5. and sleep(5) (判断页面返回时间)   判断有 ...