当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#ulL
{
border: 2px dashed black;
width: 100px;
float: left;
}
#ulR
{
border: 2px dashed black;
width: 100px;
float: right;
}
.bgcolor
{
background-color: #0094ff;
}
</style>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ulL li").click(function () {
$(this).toggleClass("bgcolor");//每点击一次li标签则给标签加个背景颜色
}); //仅仅把选中的li标签飞到右边去
$("#btnRemove").click(function (e) {
e.preventDefault();
$("li").each(function () {
if ($(this).attr("class") == "bgcolor") {
$(this).css({ position: "absolute" }).animate({ left: document.body.clientWidth - 100 }, 2000, function () {
$(this).css({ position: "static" }).appendTo("#ulR").toggleClass("bgcolor");
});
}
}); /* 当点击左边的li标签的时候飞到右边,点击右边的飞到左边,并且按照原来的顺序排列
if ($(this).parent().attr("id") == "ulL") {
$(this).css({ position: "absolute" }).animate({ left: document.body.clientWidth - 100 }, 1000, function () {
$(this).appendTo($("#ulR")).css({ position: "static" });
var uList = $("#ulR li");
uList.sort(function (x, y) {
return parseInt(x.getAttribute("index")) - parseInt(y.getAttribute("index"));
}).appendTo($("#ulR"));
}); } else {
$(this).css({ position: "absolute" }).animate({ left: 100 }, 1000, function () {
$(this).appendTo($("#ulL")).css({ position: "static" });
var uList = $("#ulL li");
uList.sort(function (x, y) {
return parseInt(x.getAttribute("index")) - parseInt(y.getAttribute("index"));
}).appendTo($("#ulL"));
});
}
*/
});
});
</script>
</head>
<body>
<ul id="ulL">
<li index="1">●●●</li>
<li index="2">◆◆◆</li>
<li index="3">■■■</li>
<li index="4">▲▲▲</li>
<li index="5">★★★</li>
</ul>
<div>
<input id="btnRemove" type="button" value="移动" />
</div>
<ul id="ulR">
</ul>
</body>
</html>
html代码