JQ动画事件

最新推荐文章于 2022-09-21 19:08:34 发布

转载最新推荐文章于 2022-09-21 19:08:34 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ruanmou001/p/3520717.html

本文介绍了使用jQuery实现的四个小特效案例，包括元素的飞行转移、消息提示框的滑动展示、图片跟随鼠标移动以及伸缩菜单效果。这些示例有助于理解jQuery在网页交互中的应用。

1、会飞的li

html:

  <ul id="ulL">
        <li>中国</li>
        <li>美国</li>
        <li>德国</li>
        <li>俄罗斯</li>
        <li>越南</li>
    </ul>
    <ul id="ulR">
    </ul>

jq:

  $(function () {
            $("li").click(function () {
                var $curLi = $(this); //被点击的li jq对象
                if ($curLi.parent().attr("id") == "ulL") {
                    $curLi.css("position", "absolute").animate({ left: "1366px" }, 2000, function () {
                        $curLi.appendTo($("#ulR")).css("position", "static");
                    });
                }
                else {
                    $curLi.css("position", "absolute").animate({ left: "10px" }, 2000, function () {
                        $curLi.appendTo($("#ulL")).css("position", "static");
                    });
                }
            });
        });

2、QQ消息框

html：

<input type="button" value="显示消息" id="showMsg" />
<div id="msgQQ"></div>

jq:

  $(function () {
            $("#msgQQ").hide();
            $("#showMsg").click(function () {
                $("#msgQQ").slideDown(2000,close);
            });
        });

        function close() {
            setTimeout(function () {
                $("#msgQQ").slideUp();
            }, 2000);  //setTimeout执行一次，setInterval执行多次
        }

3、磁力图片

html

<img src="img/cat.jpg" />

jq：

  $(document).click(function (jqEvt) {
                $("img").animate({ left: jqEvt.pageX, top: jqEvt.pageY }, 2000);

4、伸缩菜单

html

<ul>
        <li>政治明星</li>
        <li>
            <div>
                马英九</div>
            <div>
                普京</div>
            <div>
                奥巴马</div>
        </li>
        <li>体育明星</li>
        <li>
            <div>
                姚明</div>
            <div>
                乔丹</div>
            <div>
                奥尼尔</div>
        </li>
        <li>娱乐明星</li>
        <li>
            <div>
                周杰伦</div>
            <div>
                谢霆锋</div>
            <div>
                王杰</div>
        </li>
        <li>IT明星</li>
        <li>
            <div>
                马化腾</div>
            <div>
                马云</div>
            <div>
                雷军</div>
        </li>
    </ul>

jq:

 $("li:odd").hide();
            $("li:odd").addClass("odd");
            $("li:even").toggle(function () {
                var strSel = $("li").index($(this));
                var iSel = parseInt(strSel);
                $("li").eq(iSel + 1).slideDown(1000);
            }, function () {
                var strSel = $("li").index($(this));
                var iSel = parseInt(strSel);
                $("li").eq(iSel + 1).slideUp(1000);
            });
        });

转载于:https://www.cnblogs.com/ruanmou001/p/3520717.html