js会飞的li标签
2016-04-26 14:22:18 来源: 阅读:
当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/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>