<!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. HeadFirst Jsp 05 (属性和监听)

    活用DD, 比如, 我想设置一个email地址, 但是不像在servlet中硬编码, 如果能再web.xml中设置一个参数, 直接拿到这个参数就更好一点. 容器建立一个servlet时, 它会读DD( ...

  2. HDU 3544 (不平等博弈) Alice's Game

    切巧克力的游戏,想得还是不是太明白. 后者会尽量选前着切后其中小的一块来切,那么先手须尽量取中间来切. So?题解都是这么一句话,不知道是真懂了还是从别人那抄过来的. 后来找到一个官方题解,分析得比较 ...

  3. get 与post 的接收传值方式

    1.get方法接收值写法 string ad = Request["name"]; 2.post方法接收值写法 <%string a = Request.Form[" ...

  4. window+git+AndroidStudio+github

    1. 安装配置git 安装:需要从网上下载一个,然后进行默认安装即可.安装完成后,找到 “Git Bash”,点击: 配置: 注意:name和email 只是用来标识身份,但是一定要配置好 2. St ...

  5. Linux Autotools

    /********************************************************************** * Linux Autotools * 说明: * 我们 ...

  6. js屏弊错误

    <SCRIPT language=javascript> <!-- window.onerror=function(){return true;} // --> </SC ...

  7. JVM——类加载机制

    虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 在Java语言中,类型的加载.连接和初始化过 ...

  8. Android EventBus源码解析

    项目地址 :https://github.com/greenrobot/EventBus 这个项目个人感觉就是为了解决回调事件过多的,比方说A函数在做完以后 要调用b类的c函数,那我们通常的做法就是 ...

  9. Java正确转换html编码

    Java 中能將 html 編碼正確轉換的套件: org.apache.commons.lang.StringEscapeUtils. String source = "The less t ...

  10. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...