<!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. HTML部分标签和代码

    1.1.1 一般标签.格式控制标签 所谓HTML就是 Hyper Text Markup Language(超无文本标记语言) <html>   开始标签 <head> 网页上 ...

  2. ACM-ICPC竞赛模板

    为了方便打印,不再将代码放到代码编辑器里,祝你好运. ACM-ICPC竞赛模板(1) 1. 几何 4 1.1 注意 4 1.2 几何公式 4 1.3 多边形 6 1.4 多边形切割 9 1.5 浮点函 ...

  3. Java基础(49):快速排序的Java封装（含原理，完整可运行，结合VisualGo网站更好理解）

    快速排序 对冒泡排序的一种改进,若初始记录序列按关键字有序或基本有序,蜕化为冒泡排序.使用的是递归原理,在所有同数量级O(n longn) 的排序方法中,其平均性能最好.就平均时间而言,是目前被认为最 ...

  4. gson使用注意事项

    public static Object toBean(String jsonString, Class<?> beanclass) { GsonBuilder gsonb = new G ...

  5. ZOJ 3645 BiliBili（高斯消元）

    Shirai Kuroko is a Senior One student. Almost everyone in Academy City have super powers, and Kuroko ...

  6. URAL 1001 Reverse Root（水题？）

    The problem is so easy, that the authors were lazy to write a statement for it! Input The input stre ...

  7. bzoj4238 电压

    首先先直接对图进行二染色,dfs染完色后,有的边为搜索树边,有的为非树边,当非树边连接的两头的点为异色的时候,那么很明显这条非树边和树边构成的环上的边必然不可能成为答案:如果非树边的两端的点同色,那么 ...

  8. C# eval()函数浅谈

    <%# Bind("Subject") %> //绑定字段 <%# Container.DataItemIndex + 1%> //实现自动编号<%# ...

  9. angularjs 相关资料

    1.angularjs 框架结构 bootstrap process :http://www.oschina.net/translate/angularjs-the-next-big-thing?pr ...

  10. Linux 封闭端口和安全

    两种方法: 1.停掉没用的服务,关闭端口监听 2.用 iptables 封闭端口 ######################################## 1.查看端口和占用服务 netsta ...