<!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. PHP包含文件函数include、include_once、require、require_once区别总结

    一.使用语法和简介 1.include() 语法:include(/path/to/filename)include()语句将在其被调用的位置处包含一个文件.包含一个文件与在该语句所在位置复制制定文件 ...

  2. How to: Run Tests from Microsoft Visual Studio

    https://msdn.microsoft.com/en-us/library/ms182470.aspx Running Automated Tests in Visual Studio Visu ...

  3. hadoop hadoop-0.20.2-cdh3u4升级

    [hadoop@lab02 ~]$ uname -aLinux lab02 2.6.18-194.el5 #1 SMP Tue Mar 16 21:52:39 EDT 2010 x86_64 x86_ ...

  4. vmware装redhat该光盘无法被挂载

    为了考网工,没办法只能学学linux了,前天在vmware7装redhat 提示该光盘无法被挂载,还以为是光盘错误,换了N个盘,又装了很多次,最后观察到,换了盘之后点确定,里面就提示该光盘无法被挂载, ...

  5. 漫游Kafka设计篇之Producer和Consumer

    Kafka Producer 消息发送 producer直接将数据发送到broker的leader(主节点),不需要在多个节点进行分发.为了帮助producer做到这点,所有的Kafka节点都可以及时 ...

  6. sed总结

    [-] 简介 调用方式 选项 命令集合 寻址方式 基本用法 文件操作 附加-插入-修改文本 删除文本 替换文本 转换文本 补充 ------------------------------------ ...

  7. 【第三篇】说说javascript处理时间戳

    在做datagrid的时候,从数据库读出来的数据是/Date(1437705873240)/大概是这种形式,这个就是时间戳 我们需要把/Data和/去掉,才可以转成我们要的格式. 上代码 { fiel ...

  8. #define | enum(enumerator)

    /**************************************************************************** * #define | enum(enume ...

  9. HDU 5326 work （回溯，树）

    题意:给一棵树,每个结点的子树下的结点都是它的统治对象,问有多少个统治对象数目为k的结点? 思路:每个结点都设一个cnt来记数,只要将每个结点往上回溯,直到树根,经过的每个结点都将计数器加1.最后再扫 ...

  10. JavaScript中Element与Node的区别，children与childNodes的区别

    关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...