<!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. Webservce、WCF、WebApi的区别

    Web Service It is based on SOAP and return data in XML form. It support only HTTP protocol. It is no ...

  2. UESTC 1074 秋实大哥搞算数 栈模拟

    秋实大哥搞算数 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit S ...

  3. windowsUI的总结

    1,MFC 基于VC6.0的微软基础库 2,WPF 做绚丽界面一律用WPF,做一般绚丽界面用WinForm,做windows标准界面用MFC WPF也有个致命缺点,就是要.net framework支 ...

  4. You must SET PASSWORD before executing this statement解决

    [转载] MySql5.6操作时报错:You must SET PASSWORD before executing this statement解决 转载: http://blog.csdn.net/ ...

  5. UIImagePicker照片选择器

    UIImagePickerController 1.+(BOOL)isSourceTypeAvailable:(UIImagePickerControllerSourceType)sourceType ...

  6. php扩展编译（以memcached为例）

    1)到 https://pecl.php.net/ 上搜索并下载(wget)你需要的扩展的源码包 2)解压并切换进入扩展包的目录 3)使用phpize工具自动生成 configure 4)config ...

  7. linux下编译软件通用方法（memcached为例）

    1)到软件的官网或其他网站下载软件的源码包 2)解压源码包,并切换到源码目录中 3)使用./configure --help查询配置帮助,里面可能会有安装指南(Installation directo ...

  8. 【JavaScript学习笔记】画图

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var ...

  9. 【转】JavaSript模块规范 - AMD规范与CMD规范介绍

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

  10. linux 安装SVN

    1.环境centos6.4 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svnserve -d -r /www/sv ...