logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序

 昵称10504424 2013-10-31
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www./1999/xhtml">
3 <head>
4     <title></title>
5     <style type="text/css">
6         #ulL
7         {
8             border: 2px dashed black;
9             width: 100px;
10             float: left;
11         }
12         #ulR
13         {
14             border: 2px dashed black;
15             width: 100px;
16             float: right;
17         }
18         .bgcolor
19         {
20             background-color: #0094ff;
21         }
22     </style>
23     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
24     <script type="text/javascript">
25         $(function () {
26             $("#ulL li").click(function () {
27                 $(this).toggleClass("bgcolor");//每点击一次li标签则给标签加个背景颜色
28             });
29
30             //仅仅把选中的li标签飞到右边去
31             $("#btnRemove").click(function (e) {
32                 e.preventDefault();
33                 $("li").each(function () {
34                     if ($(this).attr("class") == "bgcolor") {
35                         $(this).css({ position: "absolute" }).animate({ left: document.body.clientWidth - 100 }, 2000, function () {
36                             $(this).css({ position: "static" }).appendTo("#ulR").toggleClass("bgcolor");
37                         });
38                     }
39                 });
40
41                 /*  当点击左边的li标签的时候飞到右边,点击右边的飞到左边,并且按照原来的顺序排列
42                 if ($(this).parent().attr("id") == "ulL") {
43                 $(this).css({ position: "absolute" }).animate({ left: document.body.clientWidth - 100 }, 1000, function () {
44                 $(this).appendTo($("#ulR")).css({ position: "static" });
45                 var uList = $("#ulR li");
46                 uList.sort(function (x, y) {
47                 return parseInt(x.getAttribute("index")) - parseInt(y.getAttribute("index"));
48                 }).appendTo($("#ulR"));
49                 });
50
51                 } else {
52                 $(this).css({ position: "absolute" }).animate({ left: 100 }, 1000, function () {
53                 $(this).appendTo($("#ulL")).css({ position: "static" });
54                 var uList = $("#ulL li");
55                 uList.sort(function (x, y) {
56                 return parseInt(x.getAttribute("index")) - parseInt(y.getAttribute("index"));
57                 }).appendTo($("#ulL"));
58                 });
59                 }
60                 */
61             });
62         });
63     </script>
64 </head>
65 <body>
66     <ul id="ulL">
67         <li index="1">●●●</li>
68         <li index="2">◆◆◆</li>
69         <li index="3">■■■</li>
70         <li index="4">▲▲▲</li>
71         <li index="5">★★★</li>
72     </ul>
73     <div>
74         <input id="btnRemove" type="button" value="移动" />
75     </div>
76     <ul id="ulR">
77     </ul>
78 </body>
79 </html>
复制代码

 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 昵称10504424 > 《工作》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多