首页 > 代码库 > 9会飞的li标签
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="http://www.mamicode.com/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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。