<!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. .NET业务实体类验证组件Fluent Validation

    认识Fluent Vaidation. 看到NopCommerce项目中用到这个组建是如此的简单,将数据验证从业务实体类中分离出来,真是一个天才的想法,后来才知道这个东西是一个开源的轻量级验证组建. ...

  2. PostgreSQL Insight Monitor pgstat

    PostgreSQL Insight Monitor  pgstat pgstat 是一个连接到数据库并获取数据库的活动状态的命令行工具. PostgreSQL有许多状态: archiver for ...

  3. PostgreSQL Replication之第十章 配置Slony（5）

    10.5 给复制添加表和管理的问题 一旦我们增加了此表到系统中,我们可以将它添加到复制设置.这样做有点复杂.首先,我们必须创建我们自己的新表集合并把这个和我们已经有的表合并.因此,过一段时间,我们将有 ...

  4. 转：Python 的 Socket 编程教程

    这是用来快速学习 Python Socket 套接字编程的指南和教程.Python 的 Socket 编程跟 C 语言很像. Python 官方关于 Socket 的函数请看 http://docs. ...

  5. Android 发送短信与接收短信

    package com.example.testsms; import android.app.Activity; import android.app.PendingIntent; import a ...

  6. linux抓包方法

    tcpdump -i eth0 -X -w data.cap 得到的包保存到本地wireshark解析ip.addr == url && http.request.url contai ...

  7. PAT乙级 1002. 写出这个数 (20)

    1002. 写出这个数 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 读入一个自然数n,计算其各位数字 ...

  8. 三层与MVC

    三层架构(3-tier architecture) 我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真相. 首先,它俩根本不是一个概念. 三层架构是一 ...

  9. zw版【转发·台湾nvp系列Delphi例程】.NET调用HALCON COM控件内存释放模式

    zw版[转发·台湾nvp系列Delphi例程].NET调用HALCON COM控件内存释放模式 ------------------------------------方法一 :Imports Sys ...

  10. 【ubuntu】首选项和应用程序命令（preference & application）

     gnome-control-center  系统设置  gnome-control-center region  键盘布局  gnome-control-center screen  屏幕  gno ...