{"id":62,"date":"2011-10-25T13:35:29","date_gmt":"2011-10-25T05:35:29","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=62"},"modified":"2020-06-20T22:39:06","modified_gmt":"2020-06-20T14:39:06","slug":"js%e6%89%a9%e5%bc%a0%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2011\/10\/25\/js%e6%89%a9%e5%bc%a0%e6%95%88%e6%9e%9c\/","title":{"rendered":"Js\u6269\u5f20\u6548\u679c"},"content":{"rendered":"<p>Javascript\u4ee3\u7801\u5199\u8d77\u6765\u592a\u7e41\u6742\u4e86\uff01\uff01\uff01\u60f3\u8f6c\u7528 <em>Actionscript<\/em> \uff01\uff01<\/p>\n<pre data-language=HTML><code class=\"language-markup line-numbers\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n    &lt;head&gt;\n        &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/&gt;\n        &lt;title&gt;\u6269\u5f20\u6548\u679c&lt;\/title&gt;\n        &lt;style type=\"text\/css\"&gt;\n            &lt;!-- #apDiv1 {\n                position: absolute;\n                left: 300px;\n                top: 100px;\n                width: 100px;\n                height: 100px;\n                z-index: 1;\n                background-color: #FF00FF;\n            }\n\n            #apDiv2 {\n                position: absolute;\n                left: 402px;\n                top: 100px;\n                width: 100px;\n                height: 100px;\n                z-index: 2;\n                background-color: #00FFFF;\n            }\n\n            #apDiv3 {\n                position: absolute;\n                left: 402px;\n                top: 200px;\n                width: 100px;\n                height: 100px;\n                z-index: 3;\n                background-color: #99FF00;\n            }\n\n            #apDiv4 {\n                position: absolute;\n                left: 300px;\n                top: 200px;\n                width: 100px;\n                height: 100px;\n                z-index: 4;\n                background-color: #FFFF00;\n            }\n\n            --&gt;\n        &lt;\/style&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n        &lt;div id=\"apDiv1\"&gt;&lt;\/div&gt;\n        &lt;div id=\"apDiv2\"&gt;&lt;\/div&gt;\n        &lt;div id=\"apDiv3\"&gt;&lt;\/div&gt;\n        &lt;div id=\"apDiv4\"&gt;&lt;\/div&gt;\n\n        &lt;script language=\"javascript\" type=\"text\/javascript\"&gt;\n            function $(pId) {\n                return document.getElementById(pId);\n            }\n\n            function IPos() {\n\n            }\n\n            IPos.getAbsPos = function(pTarget) {\n                var _x = 0;\n                var _y = 0;\n                while(pTarget.offsetParent) {\n                    _x += pTarget.offsetLeft;\n                    _y += pTarget.offsetTop;\n                    pTarget = pTarget.offsetParent;\n                }\n                _x += pTarget.offsetLeft;\n                _y += pTarget.offsetTop;\n\n                return {\n                    x: _x,\n                    y: _y\n                };\n            }\n\n            function JAniObj() {\n                this.obj = null;\n                this.interval = null;\n\n                this.orgPos = null;\n                this.targetPos = null;\n\n                this.orgSize = {\n                    w: 50,\n                    y: 50\n                }; \/\/\u521d\u59cb\u957f\u5bbd  \n                this.targetSize = {\n                    w: 100,\n                    y: 100\n                }; \/\/\u76ee\u6807\u957f\u5bbd  \n                this.step = {\n                    x: 10,\n                    y: 10\n                }; \/\/\u6b65\u957f x:x\u65b9\u5411\u3000y:y\u65b9\u5411  \n                this.alpha = {\n                    s: 10,\n                    e: 90,\n                    t: 10\n                }; \/\/\u900f\u660e\u5ea6\uff0cs\u521d\u59cb\uff0ce\u7ed3\u675f,t\u6b65\u957f  \n            }\n\n            function JAni() {\n                var self = this;\n                var aniObjs = {};\n\n                var getCurrentStyleProperty = function(pObj, pProperty) {\n                    try {\n                        if(pObj.currentStyle)\n                            return eval(\"pObj.currentStyle.\" + pProperty);\n                        else\n                            return document.defaultView.getComputedStyle(pObj, \"\").getPropertyValue(pProperty);\n                    } catch(e) {\n                        alert(e);\n                    }\n                }\n\n                this.popup = function(pDiv, pOrgSize, pTargetSize, pStep, pAlpha) {\n\n                    var aniObj = new JAniObj();\n                    aniObjs[pDiv] = aniObj;\n\n                    with(aniObj) {\n                        obj = $(pDiv);\n                        orgPos = IPos.getAbsPos(obj);\n                        orgSize = pOrgSize;\n                        targetSize = pTargetSize;\n                        step = pStep;\n                        alpha = pAlpha;\n\n                        with(obj.style) {\n                            overflow = \"hidden\";\n                            position = \"absolute\";\n                            width = pOrgSize.w + \"px\";\n                            height = pOrgSize.h + \"px\";\n                            left = orgPos.x + \"px\";\n                            top = orgPos.y + \"px\";\n                            if(document.all) {\n                                filter = \"Alpha(opacity=\" + pAlpha.s + \")\";\n                            } else\n                                opacity = pAlpha.s \/ 100;\n                        }\n                    }\n\n                    aniObj.interval = setInterval(\"popup_('\" + pDiv + \"')\", 10);\n                }\n\n                popup_ = function(pDivId) {\n\n                    pObj = aniObjs[pDivId];\n\n                    var w = parseInt(pObj.obj.style.width);\n                    var h = parseInt(pObj.obj.style.height);\n\n                    if(w &gt;= Math.abs(pObj.targetSize.w) &amp;&amp; h &gt;= Math.abs(pObj.targetSize.h)) {\n                        clearInterval(pObj.interval);\n                        if(document.all)\n                            pObj.obj.style.filter = \"Alpha(opacity=\" + pObj.alpha.e + \")\";\n                        else\n                            pObj.obj.style.opacity = pObj.alpha.e \/ 100;\n\n                        delete aniObjs[pObj.obj.id];\n                    } else {\n                        if(w &lt; Math.abs(pObj.targetSize.w))\n                            w += pObj.step.x;\n\n                        if(h &lt; Math.abs(pObj.targetSize.h))\n                            h += pObj.step.y;\n\n                        if(document.all) {\n                            var pattern = \/opacity=(\\d{1,3})\/;\n                            var result = pattern.exec(pObj.obj.style.filter);\n                            if(result != null) {\n                                if(result[1] &lt; pObj.alpha.e)\n                                    pObj.obj.style.filter = \"Alpha(opacity=\" + (result[1] + pObj.alpha.t) + \")\"\n                                else\n                                    pObj.obj.style.filter = \"Alpha(opacity=\" + pObj.alpha.e + \")\";\n                            }\n                        } else {\n                            if(pObj.obj.style.opacity &lt; pObj.alpha.e \/ 100) {\n                                pObj.obj.style.opacity = parseFloat(pObj.obj.style.opacity) + pObj.alpha.t \/ 100;\n                            } else\n                                pObj.obj.style.opacity = pObj.alpha.e \/ 100;\n                        }\n                    }\n\n                    pObj.obj.style.width = w + \"px\";\n                    pObj.obj.style.height = h + \"px\";\n\n                    if(pObj.targetSize.w &lt; 0) {\n                        var vLeft = parseInt(getCurrentStyleProperty(pObj.obj, \"left\"));\n                        vLeft = isNaN(vLeft) ? 0 : vLeft;\n                        pObj.obj.style.left = vLeft - pObj.step.x + \"px\";\n                    }\n\n                    if(pObj.targetSize.h &lt; 0) {\n                        var vTop = parseInt(getCurrentStyleProperty(pObj.obj, \"top\"));\n                        vTop = isNaN(vTop) ? 0 : vTop;\n                        pObj.obj.style.top = vTop - pObj.step.y + \"px\";\n                    }\n                }\n            }\n\n            var ani = new JAni();\n            ani.popup(\n                \"apDiv1\", {\n                    w: 50,\n                    h: 50\n                }, \/\/\u521d\u59cb\u957f\u5bbd  \n                {\n                    w: 200,\n                    h: 200\n                }, \/\/\u76ee\u6807\u957f\u5bbd  \n                {\n                    x: 8,\n                    y: 8\n                }, \/\/\u6b65\u957f  \n                {\n                    s: 10,\n                    e: 80,\n                    t: 10\n                } \/\/\u900f\u660e\u5ea6 \u8d77\u59cb\uff0c\u7ed3\u675f\uff0c\u6b65\u957f  \n            );\n\n            ani.popup(\n                \"apDiv2\", {\n                    w: 50,\n                    h: 50\n                }, \/\/\u521d\u59cb\u957f\u5bbd  \n                {\n                    w: -200,\n                    h: 200\n                }, \/\/\u76ee\u6807\u957f\u5bbd  \n                {\n                    x: 8,\n                    y: 8\n                }, \/\/\u6b65\u957f  \n                {\n                    s: 10,\n                    e: 40,\n                    t: 2\n                } \/\/\u900f\u660e\u5ea6 \u8d77\u59cb\uff0c\u7ed3\u675f\uff0c\u6b65\u957f  \n            );\n\n            ani.popup(\n                \"apDiv3\", {\n                    w: 50,\n                    h: 50\n                }, \/\/\u521d\u59cb\u957f\u5bbd  \n                {\n                    w: -200,\n                    h: -200\n                }, \/\/\u76ee\u6807\u957f\u5bbd  \n                {\n                    x: 8,\n                    y: 8\n                }, \/\/\u6b65\u957f  \n                {\n                    s: 10,\n                    e: 40,\n                    t: 10\n                } \/\/\u900f\u660e\u5ea6 \u8d77\u59cb\uff0c\u7ed3\u675f\uff0c\u6b65\u957f  \n            );\n\n            ani.popup(\n                \"apDiv4\", {\n                    w: 50,\n                    h: 50\n                }, \/\/\u521d\u59cb\u957f\u5bbd  \n                {\n                    w: 200,\n                    h: -200\n                }, \/\/\u76ee\u6807\u957f\u5bbd  \n                {\n                    x: 8,\n                    y: 8\n                }, \/\/\u6b65\u957f  \n                {\n                    s: 10,\n                    e: 50,\n                    t: 10\n                } \/\/\u900f\u660e\u5ea6 \u8d77\u59cb\uff0c\u7ed3\u675f\uff0c\u6b65\u957f  \n            );\n        &lt;\/script&gt;\n    &lt;\/body&gt;\n\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Javascript\u4ee3\u7801\u5199\u8d77\u6765\u592a\u7e41\u6742\u4e86\uff01\uff01\uff01\u60f3\u8f6c\u7528 Actionscript \uff01\uff01 &lt;!DOC<a href=\"https:\/\/blog.indeex.club\/index.php\/2011\/10\/25\/js%e6%89%a9%e5%bc%a0%e6%95%88%e6%9e%9c\/\" class=\"read-more\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/62"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/62\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}