<!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. hdu - 1010 Tempter of the Bone (dfs+奇偶性剪枝) && hdu-1015 Safecracker(简单搜索)

    http://acm.hdu.edu.cn/showproblem.php?pid=1010 这题就是问能不能在t时刻走到门口,不能用bfs的原因大概是可能不一定是最短路路径吧. 但是这题要过除了细心 ...

  2. php关于return的关键字

    使用return关键字可以使函数返回值,可以返回包括数组和对象的任意类型,如果省略了 return,则默认返回值为 NULL. function add($a) { return $a+1; } $b ...

  3. bash/shell 数学计算

    $ echo $((20.0/7)) $ zcalc $ bc <<< 20+5/2 $ bc <<< 'scale=4;20+5/2' $ expr 20 + 5 ...

  4. python 捕获 shell/bash 脚本的输出结果

    #!/usr/bin/python## get subprocess module import subprocess ## call date command ##p = subprocess.Po ...

  5. 一个发光的搜索边框（纯CSS3）

    这是效果图,边框会不停的闪,兼容各种浏览器 HTML代码: <body> <div class="container"> <form method=& ...

  6. core--线程池

    对于服务器-客户端这种架构的软件,通常客户端的数据来自于服务器,如何让一个服务器进程,来满足多个客户端程序的数据请求?一种简单的方法就是,每当一个客户请求来领,服务器就为该客户端创建一个线程.当有10 ...

  7. Xcode调试工具Instruments指南

    主要途径是参考苹果官方文档,所以介绍以翻译官方文档为主.由于内容比较多,会分阶段来介绍. 以下来自苹果官方文档中对Instruments描述 介绍 Instruments是一个强大而灵活的性能分析和测 ...

  8. UVa 10815 Andy's First Dictionary

    感觉这道题要比之前几个字符串处理的题目难度要大了一些. 题目大意:给若干行字符串,提取出所有单词并去掉重复的,最后按字典顺序输出. 对于输入大致有两种思路,一种是逐个读入字符,遇到字母的话就放到wor ...

  9. BOM浏览器对象

    BOM 浏览器对象 一.浏览器本身就自己有一些对象,不用创建就可以使用 window(当前浏览器窗体) 属性: status opener closed parent top 方法: alert(); ...

  10. BZOJ 1878 HH的项链

    不能分块(显然复杂度会炸啊.....) 离线+BIT.每个颜色在每个询问中只出现一次. #include<iostream> #include<cstdio> #include ...