<!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. tomcat配置SSL证书(使用startSSL申请到的证书)

    1. 生成p12证书 生成完成后,下载保存. 2. 将p12文件上传至服务器上的tomcat/keystore/上,此处取名为test.com.p12 3. 修改tomcat/conf/server. ...

  2. 【前端】String.prototype.match() 用法详解

    var str="1 plus 2 equal 3" // 正则表达式 console.log(str.match(/\d+/g)); // ["1", &qu ...

  3. 自定义Dialog

    功能:从底部弹出的对话框,加入动画 步骤:1 定义dialog布局文件 2 设置标题,透明度style.xml,选择器selector.xml ,圆角shape.xml 等样式文件 3 设置显示位置, ...

  4. 自建数据源（RSO2）、及数据源增强

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. sbrk与brk的使用小例子

    sbrk() 和 brk() - Unix的系统函数   sbrk()和brk() 系统的底层会维护一个位置,通过位置的移动完成内存的分配和回收.映射内存时 以一个内存页作为基本单位.   void* ...

  6. postgis数据库文件shapefile导入 dbf file (.dbf) can not be opened.shapefile import failed.

    Destination: public.train_polylineSource File: C:\Documents and Settings\Administrator\桌面\ffffff\tra ...

  7. netstat__stat

    1."man netstat" 查看 命令"netstat"的参数和打印信息的含义 2."netstat -awp" --> ZC: ...

  8. [css]【转载张鑫旭】我是如何对网站CSS进行架构的

    一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...

  9. 【matlab】膨胀

    clear all;close all; BW=zeros(9,10); BW(4:6,4:7) =1 imshow(BW) hold on SE=strel('square',3) BW2=imdi ...

  10. 如何搭建一个linux服务器

    1, 首先 下载一个linux server 系统镜像 ubuntu 64bit下载 http://www.ubuntu.com/download/server/thank-you/?version= ...