<!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. python字符串加颜色区别

    1.有时需要显目的区别不同内容,可以改变显目的内容颜色 print("\033[31;1m你好麽,\033[0m我很好..")print("\033[32;1m你好麽,\ ...

  2. Hadoop笔记HDFS(1)

    环境:Hadoop2.7.3 1.Benchmarking HDFS 1.1测试集群的写入 运行基准测试是检测HDFS集群是否正确安装以及表现是否符合预期的好方法.DFSIO是Hadoop自带的一个基 ...

  3. centos7 安装webmin

    一 下载webmin软件包 wget http://prdownloads.sourceforge.net/webadmin/webmin-1.791-1.noarch.rpm 二 安装perl环境 ...

  4. Open source packages on Deep Reinforcement Learning

    智能车 self driving car + 强化学习 reinforcement learning + 神经网络 模拟 https://github.com/MorvanZhou/my_resear ...

  5. iOS - Xcode 插件

    Xcode 插件 Xcode 插件安装目录: ~/library/Application Support/Developer/Shared/Xcode/Plug-ins Xcode 插件大全 http ...

  6. java实现httpclient2

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...

  7. Android权限声明

    1.网络 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/ > < ...

  8. 不再折腾-----hadoop-1.2.1完全分布式安装

    准备工作 三台虚拟机,强烈推荐vmware + centos6.5 三台虚拟机均设有hadoop用户 IP地址设置 IP地址 hostname 192.168.11.100 master 192.16 ...

  9. Validate Binary Search Tree [LeetCode]

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  10. uva 1151（最小生成树，枚举子集）

    题意:平面上有n个点(1<=N<=1000),你的任务是让所有n个点连通,为此,你可以新建一些边,费用等于两个端点的欧几里得距离的平方.另外还有q(0<=q<=8)个套餐,可以 ...