<!DOCTYPE html>

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        /*#div1{ height:100px; width:100px; position:absolute; --left:800px; margin-top:90px; background-color:red;}

        span { height:300px; width:1px; position:absolute; left:500px; background-color:black; }*/

        div { height:100px; width:100px; margin-top:50px; background-color:red; }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            //var oBtn = document.getElementById('btn1');

            //oBtn.onclick = function () {

            //    starMove(400);

            //}

            var oDiv = document.getElementsByTagName('div');

            //var i = 0;

            //for (i = 0; i < oDiv.length; i++) {

            //}

            oDiv[0].onmouseover = function () {

                starMove(this, 'width', 300);

            }

            oDiv[0].onmouseout = function () {

                starMove(this, 'width', 100);

            }

            oDiv[1].onmouseover = function () {

                starMove(this, 'height', 300);

            }

            oDiv[1].onmouseout = function () {

                starMove(this, 'height', 100);

            }

            oDiv[2].onmouseover = function () {

                starMove(this, 'opacity', 30);

            }

            oDiv[2].onmouseout = function () {

                starMove(this, 'opacity', 100);

            }

        }

        window.onscroll = function () {

            var scroTop = document.documentElement.scrollHeight || document.body.scrollTop;

        }

        //获取样式数值

        function getStyle(obj, attr)

        {

            if (obj.currentStyle) {

                return obj.currentStyle[attr];

            }

            else {

                return getComputedStyle(obj, false)[attr];

            }

        }

        var iSpeed=0;

        function starMove(obj,attr,iTarget)

        {

            clearInterval(obj.timer);

            var iCur = 0;

            obj.timer = setInterval(function () {

                //parseInt(parseFloat(getStyle(obj, attr)) * 100)中 parseFloat(getStyle(obj, attr)为取带小数的opacity值

                //parseInt(...) 目的为 解决计算机小数问题bug 防止3.0000000000001=3 类似问题

                iCur = attr == "opacity" ? parseInt(parseFloat(getStyle(obj, attr)) * 100) : parseInt(getStyle(obj, attr));

                //iCur = parseInt(getStyle(obj, attr));

                iSpeed =(iTarget - iCur) / 8;

                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if (iCur == iTarget) {

                    clearInterval(obj.timer);

                } else {

                    if (attr == "opacity") {

                        obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';

                        obj.style.opacity = (iCur + iSpeed) / 100;

                    } else {

                        obj.style[attr] = iCur + iSpeed + 'px';

                    }

                }

            }, 30);

        }

    </script>

</head>

<body>

    <!--<input type="button" id="btn1" value="开始" /><br />

    <div id="div1"></div>

    <span></span>-->

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

　　

js笔记---（运动）通用的move方法，兼容透明度变化的更多相关文章

  1. js笔记---封装自己的Ajax方法

    //地址 成功方法 失败方法function Ajax(url, funsucc, funfial) { var oAjax = null; if (window.XMLHttpRequest) { ...

  2. js笔记----(运动)分享 隐藏/显示

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

  4. [Effective JavaScript 笔记]第51条：在类数组对象上复用通用的数组方法

    前面有几条都讲过关于Array.prototype的标准方法.这些标准方法被设计成其他对象可复用的方法,即使这些对象并没有继承Array. arguments对象 在22条中提到的函数argument ...

  5. Asp.Net实现JS前台带箭头的流程图方法总结！（个人笔记，信息不全）

    Asp.Net实现JS前台带箭头的流程图方法总结!(持续更新中) 一.返回前台json格式 json5 = "[{\"Id\":2259,\"Name\&quo ...

  6. js笔记（3）--js实现数组转置（两种方法）

      js实现数组转置   第一种方法:   <script>     window.onload=function(){     var array1=[[11,22,33,333],[4 ...

  7. JavaScript手札：《编写高质量JS代码的68个有效方法》（一）（1~5）

    编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  8. 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...

  9. [js笔记整理]事件篇

    一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...

随机推荐

  1. C# 统计程序执行时间

    随便写写,小马哥勿怪 最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.     话说马云年轻的时候也是屌丝一枚,有图为证 现 ...

  2. c#异步调用

    首先来看一个简单的例子: 小明在烧水,等水烧开以后,将开水灌入热水瓶,然后开始整理家务 小文在烧水,在烧水的过程中整理家务,等水烧开以后,放下手中的家务活,将开水灌入热水瓶,然后继续整理家务 这也是日 ...

  3. iOS6：在你的App内使用Passbook

    前言 这是一篇翻译,感谢Jonathan Tang. 原文地址:iOS 6 Tutorial: Integrating Passbook into Your Applications 另外,看到另一篇 ...

  4. 将activity变成dialog风格

    其实很简单: 只是把activity的theme设置成dilog形式的: <activity android:name=".ActivityPackage.DatePickerActi ...

  5. Windows 2003/2008更改远程桌面端口脚本

    保存为bat文件,点击运行按提示输入新端口自动完成,直接下载更改远程桌面端口脚本   @echo off color 0a title @@ 修改Windows XP/2003/2008远程桌面服务端 ...

  6. Oracle数据类型总结

    一 字符串类型 1.1:CHAR类型 CHAR(size [BYTE | CHAR]) CHAR类型,定长字符串,会用空格填充来达到其最大长度.非NULL的CHAR(12)总是包含12字节信息.CHA ...

  7. 【rails3教材】博客构建过程

    构建rails项目--blog $ rails new blog --skip-bundle $ cd blog $ bundle --local $ bundle install #安装需要的包 $ ...

  8. microsoft .netframework Available Source Code Components

    http://referencesource.microsoft.com/netframework.aspx http://blogs.msdn.com/b/dotnet/archive/2012/0 ...

  9. django models使用学习记录

    如何更新单个数据 example = User.objects.get(id=1) example.is_acitve=1 example.save() 如何更新多个数据 examples = Use ...

  10. 在Javaweb中使用Scala

    Java 是一门比较优秀的编程语言, 其最大功劳是建立非常繁荣的JVM平台生态.不过 Java 语法比较麻烦,写过 C, Python 的人总是想使用简洁的语法,又希望利用上 Java 平台的强大,因 ...