当前位置：首页 → 问答吧 → $("").animate 的高级应用。

$("").animate 的高级应用。

时间：2009-09-27

来源：互联网

问一下儿，写了一个弹出层的效果，但是有个小问题。
这个层每次出来的时候都是从左上角 top:0  left:0 的位置‘滑动’出来的，要怎么写才能让这个层，从被触发的位置滑动出来？
比如我定义了一个页面中的任意一个位置，然后点击这个位置的时候，就从这个位置‘滑动’出来。
－－－－－－
<script type="text/javascript" src="../Common/Js/jquery-1.3.2.js"></script>
<script type="text/javascript">
    function popupDiv(div_id)
    {
        var div_obj = $("#"+div_id);
        //窗口宽高
    var windowWidth = document.body.clientWidth;
        var windowHeight = document.body.clientHeight;

        //弹出层宽高
    var popupHeight = div_obj.height();
        var popupWidth = div_obj.width();

        //目标位置
    var btn= $("#btnTest");
        var Coordinate= $("#btnTest").offset();

        //添加并显示遮罩层
//        $("<div id='mask'></div>").addClass("mask")
//                                  .width(windowWidth + document.body.scrollWidth)
//                                  .height(windowHeight + document.body.scrollHeight)
//                                  .click(function() {hideDiv(div_id); })
//                                  .appendTo("body")
//                                  .fadeIn(200);

        //显示层，可以自定义层
        div_obj.css({"position": "absolute"})
               .animate(
               {
               left: Coordinate.left + btn.width() + 3,
               top: Coordinate.top + btn.height() + 3,
               opacity: "show"
               }, "slow");
    }

    function hideDiv(div_id) {
        $("#mask").remove();
        $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
    }
    </script>
－－－－－－
<body>
    <form id="form1" runat="server">
        <div id='pop-div' style="width: 300px;" class="pop-box">
            <h4>
                标题位置</h4>
            <div class="pop-box-body">
                <p>
                    正文内容
                </p>
                <input id="btnClose" type="button" onclick="hideDiv('pop-div');" value="关闭" />
            </div>
        </div>
        <input type="button" id="btnTest" value='test' onclick="popupDiv('pop-div');" />
        <select id="slt">
            <option value="1">1</option>
        </select>
    </form>
</body>

作者: fengmq 发布时间: 2009-09-27

真是不敢恭维亚，貌似高手不多呀！

作者: fengmq 发布时间: 2009-09-27

问题解决了，原来用一个 event.clientX 就可以将 animate ‘滑动’效果的起始坐标定位到当前鼠标点击时的位置了。
自己的问题，自己解答！呵呵

作者: fengmq 发布时间: 2009-09-27