<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>运动框架</title>

    <script src="move.js" type="text/javascript"></script>

    <script type="text/javascript">

        window.onload = function(){

            var oDiv = document.getElementById("div1");

            var oBtn = document.getElementById("btn1");

            oBtn.onclick = function(){

                 move(oDiv,'right',300);   //可使

                 //move(oDiv,'left',300);  //可使

                 //move(oDiv,'top',300);   //可使

                 //move(oDiv,'width',300); //可使

                 //move(oDiv,'height',300); //可使

            }

            oDiv.onmouseover = function(){

                move(oDiv,'opacity',100);

            }

            oDiv.onmouseout = function(){

                move(oDiv,'opacity',30);

            }

        }

    </script>

</head>

<body>

  <input type="button" id="btn1" value="运动" />

   <div id="div1" style="width:200px;height:200px;position:absolute;background:red;filter:alpha(opacity=30);opacity:0.3;">

   </div>

</body>

</html>

js：

//height，left , top ,right ，opacity

var timer = null

function move(obj,attr,target)

{

     //开启定时器

     timer = setInterval(function(){

     var current = 0;

     if(attr=="opacity")

     {

        current = Math.round(parseFloat(getStyle(obj,attr))*100);

     }

     else

     {

        current = parseInt(getStyle(obj,attr));

     }

    var speed = target>current ? 6 :-6;

    if(Math.abs(current-target)<6)

    {

        //清除定时器

        clearInterval(timer);

    }

    else

    {

         if(attr=="opacity")

         {

            obj.style.filter = "alpha(opacity:"+(current + speed) +")";

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

         }

         else

         {

            obj.style[attr] = current + speed +"px";

         }

    }

   },30);

}

function getStyle(obj,attr)

{

    if(obj.currentStyle)  //用于IE

    {

        return obj.currentStyle[attr];

    }

    else

    {

        //document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法

        return document.defaultView.getComputedStyle(obj, null)[attr];

        //getComputedStyle DOM1中的方法

        //return getComputedStyle(obj,false)[attr];

    }

}

js 运动框架及实例的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  4. js运动框架之掉落的扑克牌（重心、弹起效果）

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  5. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  6. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  7. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  8. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  9. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

随机推荐

  1. 软件工程_7th weeks

    内聚和耦合(学习笔记) 一.内聚 内聚是一个模块内部各成分之间相关联程度的度量.把内聚按紧密程度从低到高排列次序为: 1.偶然内聚:指一个模块内各成分为完成一组功能而组合在一起,它们相互之间即使有关系 ...

  2. [转] python 模块学习 hashlib

    转自: http://www.cnblogs.com/BeginMan/p/3328172.html 一.hashlib概述 涉及加密服务:14. Cryptographic Services 其中 ...

  3. BZOJ1022[SHOI2008]小约翰的游戏——anti-SG(反尼姆博弈)

    题目描述 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取,我们规定取到 ...

  4. BZOJ4448[Scoi2015]情报传递——主席树+LCA

    题目描述 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有n名情报员.每名情报员口J-能有 若T名(可能没有)下线,除1名大头目外其余n-1名情报员有且仅有1名上线.奈特公司纪律森严 ...

  5. python numpy 数组拼接

    我就写一下我遇到的,更多具体的请看Python之Numpy数组拼接,组合,连接 >>> aarray(［0, 1, 2],       [3, 4, 5],       [6, 7, ...

  6. 【BZOJ3811】玛里苟斯（线性基）

    [BZOJ3811]玛里苟斯(线性基) 题面 BZOJ 题解 \(K=1\)很容易吧,拆位考虑贡献,所有存在的位出现的概率都是\(0.5\),所以答案就是所有数或起来的结果除二. \(K=2\)的情况 ...

  7. luogu4182 [USACO18JAN] Lifeguards P (单调队列优化dp)

    显然可以先把被覆盖掉的区间去掉,然后排个序,左.右端点就都是单调的 设f[i][j]表示前i个区间中删掉j个,而且钦定i不能删的最大覆盖长度 (如果不钦定,就要有一个删掉的状态,那我无法确定前面的到底 ...

  8. 我们一起来详细的了解react的语法以及组件的使用方法

    jsx的介绍 React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. jsx的优点 JSX 执行更快,因为它在编译为 J ...

  9. 动态分配内存 new

    a=]; ;i<=n;i++) a[i]=]; 感觉比malloc好用. 动态初始化后,值并非全为0,注意!

  10. word产品密钥激活

    1.找到对应版本 2.在网上找对应的破解软件和激活密钥 注意有些软件是不能在你的电脑上运行达到所要结果的,多试几个 有点软件在打开时需要把杀毒软件关了.下载后先杀毒确定没有病毒后,把把杀毒软件关了,并 ...