<!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. 详解 ASP.NET并行，异步，多线程

    最近在学习.net4以上版本新特性的时候,发现在异步这方面提供了很多好玩的.以下Mark 2篇好文,温故而知新! http://www.cnblogs.com/wisdomqq/archive/201 ...

  2. [转]EntityFramework走马观花之CRUD（上）

    学习Entity Framework技术期间查阅的优秀文章,出于以后方便查阅的缘故,转载至Blog,可查阅原文:http://blog.csdn.net/bitfan/article/details/ ...

  3. eclipse下部署web工程的两种方式

    习惯了Eclipse 的开发,就觉得不想那么懒去用MyEclipse傻瓜式的部署工程. 第一种,手动部署工程. 情况一:如果工程目录在tomcat目录的webapp目录下,这种情况就不需要有工程部署的 ...

  4. 头部固定下面滑动&&获取手机屏高

    height(){ //获取屏高 let phone_height = document.documentElement.clientHeight; let group = this.refs.sea ...

  5. Java堆

    1. Java堆的内存是由操作系统分配给JVM的内存部分. 2. Java的对象是在堆中创建 3. Java堆空间为了垃圾回收分为三个区域或代,叫做新代,年老代和永久代.在Hotspot JVM中永久 ...

  6. C++新手之详细介绍MFC

     MFC (Microsoft Foundation Class Library)中的各种类结合起来构成了一个应用程序框架,它的目的就是让程序员在此基础上来建立Windows下的应用程序,这是一种相对 ...

  7. TF255466: Team Foundation Server 的配置过程无法继续。以前的更新或安装需要重

    在验证是否可以安装 SharePoint 时的提示,Error [ System Checks ] TF255466: The configuration process for Team Found ...

  8. java父类转子类的一个方法

    一般子类可以转父类.但父类转子类就会报cast error. 使用jsonobject 思想:先把父类转jsonstring 再把jsonstring转子类.剩余的子类值可以设定进去. import ...

  9. StringTokenizer类

    StringTokenizer是一个用来分隔String字符串的应用类. 1.构造函数 public StringTokenizer(String str)  //构造一个用来解析str的String ...

  10. NOIP200902分数线划定

    NOIP200902分数线划定 描述 世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A 市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根据 ...