zoukankan      html  css  js  c++  java
  • 9会飞的li标签

    <!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 type="text/css">
            ul {
                border: dashed;
            }
    
            #ulL {
                float: left;
            }
    
            #ulR {
                float: right;
            }
        </style>
        <script src="Scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#ulL").children().click(function () {
                    $("#ulL li").click(function () {
                        var $curLi = $(this);
                        //0.判断当前 li 是否在左侧 ul中,如果在,则移动到右侧
                        if ($curLi.parent().attr("id") == "ulL") {
                            //1.被点击的li对象 设置为 绝对布局,动画飞到 右侧
                            //***获取浏览器的可见宽度:document.body.clientWidth
                            $curLi.css("position", "absolute").animate({ left: document.body.clientWidth - 20 }, 2000, function () {
                                //2.动画的回调函数中,将 li对象 移到 右侧ul中,并设置为 静态布局(默认值)。
                                $curLi.appendTo($("#ulR")).css("position", "static");
                            })
                        } else {//否则移动到左侧
                            //1.被点击的li对象 设置为 绝对布局,动画飞到 右侧
                            $curLi.css("position", "absolute").animate({ left: "10px" }, 2000, function () {
                                //2.动画的回调函数中,将 li对象 移到 右侧ul中,并设置为 静态布局(默认值)。
                                $curLi.appendTo($("#ulL")).css("position", "static");
                            })
                        }
    
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="ulL">
            <li>中国</li>
            <li>美国</li>
            <li>德国</li>
            <li>俄罗斯</li>
        </ul>
    
        <ul id="ulR">
        </ul>
    
    </body>
    </html>
    

      

  • 相关阅读:
    第一次Java作业
    第十一次作业
    第十次作业
    第九次作业
    第八次作业
    第七次作业
    第六次作业
    Java中数组自定义排序与优先级队列笔记
    力扣每日一题:删除链表的倒数第N个节点
    又一次离谱的错误——运算符优先级
  • 原文地址:https://www.cnblogs.com/sumg/p/3787779.html
Copyright © 2011-2022 走看看