<!doctype html>

<html>

    <head>

        <meta charset = "utf-8">

        <title>未命题</title>

        <style>

            *{margin: 0;

                padding: 0;

            }

            #div1{

                height: 200px;

                width: 150px;

                background: red;

                position:absolute;

                top:50px;

                left: -150px;

            }

            #div2{

                height: 50px;

                width: 20px;

                background: black;

                color: white;

                position:absolute;

                top:100px;

                right:-20px;

                line-height: 25px;

                cursor: pointer;

            }

            img{

            margin-left: 200px;

            opacity: 0.3;

            alpha(opacity = 30);

            }

        </style>

        <script>

            window.onload = function ()

            {

                odiv1 = document.getElementById('div1');

                odiv2 = document.getElementById('div2');

                oimg = document.getElementById('img1');

                odiv1.onmouseover= function ()

                {

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

                }

                odiv1.onmouseout = function ()

                {

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

                }

                oimg.onmouseover = function ()

                {

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

                }

                oimg.onmouseout = function ()

                {

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

                }

                function startMove (obj,attr,goal,speed)

                {

                    clearInterval(obj.timer);

                    var icur = 0;

                    obj.timer = setInterval(function(){

                        if(attr == 'opacity')

                        {

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

                        }

                        else

                        {

                            icur = parseInt(css(obj,attr))

                        }

                        if(icur == goal)

                        {

                            clearInterval(obj.timer);

                        }

                        else

                        {

                            if(attr == 'opacity')

                            {

                                obj.style.opacity = (icur + speed )/100;

                                obj.style.filter = 'alpha(opacity = '+ (icur + speed ) +')';

                            }

                            else

                            {

                                obj.style[attr] = icur + speed + '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 id="img1" src = "img/1.jpg">

    </body>    

</html>

js 多物体运动的更多相关文章

  1. js多物体运动之淡入淡出效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. JS多物体运动案例：变宽、变高

    任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px ...

  3. js多个物体运动问题2

    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...

  4. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  5. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

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

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

  7. JS多物体宽度运动案例

    任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...

  8. js动画之多物体运动

    多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

随机推荐

  1. 51nod 1117 聪明的木匠 (贪心）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1117 跟挑战程序书上例题一样,将要切割的n断木板,分别对应二叉树树的叶子 ...

  2. Android OTA 升级之三：生成recovery.img

    Android OTA 升级之三:生成recovery.img 作者: 宋立新 Email:zjujoe@yahoo.com 前言 得到了ota升级包后,我们就可以用它来升级系统了.Android 手 ...

  3. mtk Android 编译命令自定义--添加版本号

    1. alps\build\core\Makefile文件:(参照CUSTOM_BUILD_VERNO) ifeq "" "$(SURPLUS_BUILD_VERNO)& ...

  4. [CFGym101028] 2016 Al-Baath University Training Camp Contest-1

    比赛链接:http://codeforces.com/gym/101028/ 由于实习,几乎没有时间刷题了.今天下午得空,断断续续做了这一套题,挺简单的. A.读完题就能出结果. /* ━━━━━┒ギ ...

  5. [Topcoder]AvoidRoads（dp，hash）

    题目连接:https://community.topcoder.com/stat?c=problem_statement&pm=1889&rd=4709 题意:给一张n*m的地图,上面 ...

  6. SQL[连载3]sql的一些高级用法

    SQL[连载3]sql的一些高级用法 SQL 高级教程 SQL SELECT TOP SQL SELECT TOP 子句 SELECT TOP 子句用于规定要返回的记录的数目. SELECT TOP ...

  7. Lepus经历收获杂谈（二）——QT

    QT简介及相关使用指南 1.QT Qt是1991年奇趣科技开发的一个跨平台的C++图形用户界面应用程序框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框 ...

  8. 权限控制框架Shiro简单介绍及配置实例

    Shiro是什么 http://shiro.apache.org/ Apache Shiro是一个非常易用的Java安全框架,它能提供验证.授权.加密和Session控制.Shiro非常轻量级,而且A ...

  9. 最小生成树之Kruskal

    模板题,学习一下最小生成树的Kruskal算法 对于一个连通网(连通带权图,假定每条边上的权均为大于零的实数)来说,每棵树的权(即树中所有边的权值总和)也可能不同 具有权最小的生成树称为最小生成树 生 ...

  10. iOS8 LaunchScreen.storyboard

    我目前的需求是需要将启动图片通过LaunchScreen.storyboard  来实现. 我首先想到的是创建一个Sb,使用自动布局来布局imageview,并设置如下图: 布局好之后,在Image里 ...