1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         ul {
  8.             border: dashed;
  9.         }
  10.  
  11.         #ulL {
  12.             float: left;
  13.         }
  14.  
  15.         #ulR {
  16.             float: right;
  17.         }
  18.     </style>
  19.     <script src="Scripts/jquery-1.8.2.min.js"></script>
  20.     <script type="text/javascript">
  21.         $(function () {
  22.             $("#ulL").children().click(function () {
  23.                 $("#ulL li").click(function () {
  24.                     var $curLi = $(this);
  25.                     //0.判断当前 li 是否在左侧 ul中，如果在，则移动到右侧
  26.                     if ($curLi.parent().attr("id") == "ulL") {
  27.                         //1.被点击的li对象 设置为 绝对布局，动画飞到 右侧
  28.                         //***获取浏览器的可见宽度：document.body.clientWidth
  29.                         $curLi.css("position", "absolute").animate({ left: document.body.clientWidth - 20 }, 2000, function () {
  30.                             //2.动画的回调函数中，将 li对象 移到 右侧ul中，并设置为 静态布局（默认值）。
  31.                             $curLi.appendTo($("#ulR")).css("position", "static");
  32.                         })
  33.                     } else {//否则移动到左侧
  34.                         //1.被点击的li对象 设置为 绝对布局，动画飞到 右侧
  35.                         $curLi.css("position", "absolute").animate({ left: "10px" }, 2000, function () {
  36.                             //2.动画的回调函数中，将 li对象 移到 右侧ul中，并设置为 静态布局（默认值）。
  37.                             $curLi.appendTo($("#ulL")).css("position", "static");
  38.                         })
  39.                     }
  40.  
  41.                 });
  42.             });
  43.         });
  44.     </script>
  45. </head>
  46. <body>
  47.     <ul id="ulL">
  48.         <li>中国</li>
  49.         <li>美国</li>
  50.         <li>德国</li>
  51.         <li>俄罗斯</li>
  52.     </ul>
  53.  
  54.     <ul id="ulR">
  55.     </ul>
  56.  
  57. </body>
  58. </html>

　　

9会飞的li标签的更多相关文章

  1. js会飞的li标签

    当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  2. 给li标签添加自定义属性

    给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...

  3. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  4. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. ul+li标签制作表格

    table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...

  6. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  7. li标签之间的空隙问题（转）

    原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题   IE6/7的Bug:纵向排列的li中加 ...

  8. bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除

    //该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...

  9. 用正则表达式抓取网页中的ul 和 li标签中最终的值！

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

随机推荐

  1. Ubuntu配置和修改IP地址

    Ubuntu配置和修改IP地址 1.修改配置文件/etc/network/interfacesroot@ubuntu:~# sudo gedit /etc/network/interfaces 添加以 ...

  2. HEVC测试序列（百度云网盘分享）

    巧妇难为无米之炊,身为一个码农怎能碗里没有米呢?想必很多朋友都碰到下载测试序列的困惑,为了减少麻烦,现提供HEVC所有测试序列的下载,上传到百度云网盘上,方便大家下载.主要的测试序列如下: Test ...

  3. Ascll

    ascll - 概述 ASCII码(American Standard Code for Information Interchange, 美国标准信息交换码).   信息编码就是将表示信息的某种符号 ...

  4. HDU 5791 Two

    题意:给两个序列,求公共序列的个数 分析:很自然想到最长公共子序列的转移的转移形式,用dp[i][j]表示第一个串前i个 和第二个串前j个匹配的答案数量,a[i]==b[i],dp[i][j]=dp[ ...

  5. Android常用组件Broadcast介绍

    一.Broadcast简介 Broadcast是Android的四大组件之一.可分为: 1.普通广播 发送一个广播,所有监听该广播的广播接收者都可以监听到改广播. 2.异步广播 当处理完之后的Inte ...

  6. Sublime+Emmet

    Sublime使用Package Control安装Emmet插件: 按Ctrl+Shift+P命令板 输入install然后选择install Package,然后输入emmet找到 Emmet C ...

  7. SDK编程模板

    #include<Windows.h> LRESULT CALLBACK WndProc(HWND,UINT,WPARAM,LPARAM); int WINAPI WinMain(HINS ...

  8. centos安装如何选择安装包

    1.根据经验,选择安装包时应该按最小化原则,即不需要的或者不确定是否需要的就不安装,这样可以最大程度上确保系统安全. 2.如果安装过程落了部分包组或者其他伙伴安装时没选,再安装后可以按如下方式补上安装 ...

  9. illegal to have multiple occurrences of contentType with different values (old: text/html; charset=UTF-8, new: text/html; charset=utf-8)

    问题描述: 在a.jsp通过<%@ include file="b.jsp" %> 的方式引入b.jsp,但是报了标题的中的错误, 问题原因: 在a.jsp的头部: & ...

  10. keepalived 安装和配置

    第一步:安装 yum -y install keepalived 第二步:配置 /etc/keepalived/keepalived.conf ! Configuration File for kee ...