<!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. mongodb的基本操作与插入文档(document)

    一.mongodb的基本操作: 1.查看mongodb当前所有的databases : show dbs 2.选择数据库(database) : use databaseName(该数据库不存在则会自 ...

  2. 转：python webdriver API 之下载文件

    webdriver 允许我们设置默认的文件下载路径.也就是说文件会自动下载并且存在设置的那个目录中.要想下载文件,首选要先确定你所要下载的文件的类型.要识别自动文件的下载类型可以使用 curl ,如图 ...

  3. oracle安装过程中遇到的问题

    今天遭遇ORA-12560: TNS: 协议适配器错误的问题,经过一番努力问题已经解决,与大家共享. 造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个: 1.监听服务没有起起来.w ...

  4. javax.servlet.jsp.JspException cannot be resolved to a type

    javax.servlet.jsp.PageContext cannot be resolved to a type javax.servlet.jsp.JspException cannot be ...

  5. Codeforces Round #288 (Div. 2)

    A. Pasha and Pixels     题意就是给一个n*m的矩阵,k次操作,一开始矩阵全白,一次操作可以染黑一个格子,问第几次操作可以使得矩阵中存在一个2*2的黑色矩阵.直接模拟即可 代码: ...

  6. ligerui_ligerTree_002_利用JavaScript代码配置ligerTree节点

    利用JavaScript代码配置ligerTree节点: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: <%@ p ...

  7. 夺命雷公狗---node.js---1node的下载和安装

    node目前有两个网站,一个是英文的,一个是中文的,,左边这个是长期有效版本,右边的是最新版本,在下面可以很清晰的看得到node的英文网站更新速度是比中文网站上的快的多 我们用来测试的版本是windo ...

  8. 夺命雷公狗---2016-linux---2之软件实现远程登录

    废话不多说,操作方法如下所示:

  9. 夺命雷公狗ThinkPHP项目之----企业网站10之栏目的编辑完善（无限极分类的完成）

    我们编辑首先就要考虑将下拉框效果实现出来,然后再进行下一步操作: 我们用到了Model层的操作,在第8讲里面其实已经写好了catTree方法,控制器如下所示: 然后在列表页然他变量进行输出 然后开始通 ...

  10. 【兄弟连ThinkPHP】1、介绍和安装

    琢磨了好几天的ThinkPHP了,兄弟连的视频真心不错,下面是记得一些要点,只做备忘,有兴趣的朋友请去百度兄弟连. ## ThinkPHP 3 介绍及安装#讲师:赵桐正微博:http://weibo. ...