jquery实现左右列表项跳跃

原创 2016年05月31日 18:25:45


这是有中间按钮的

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.js"></script>
<style>
body , ul , li , div {
margin: 0;
padding:0;
box-sizing: border-box;
}


body div {
width: 100px;
height: 200px;
border: 1px solid #666666;
margin: 5% 2%;
float: left;
}


ul {
width: 100px;
height: 200px;
text-align: center;
}


li {
margin:20% 2% ;
list-style: none;
/*border:1px solid #666666;*/
}


.box_center {
padding-left:1.5% ;
padding-top:.5% ;
}


.box_center span {
display: block;
width: 50px;
height: 15px;
text-align: center;
cursor: pointer;
margin: 34% 0;
}


.box_left ul .left_active {
color: red;
}


.box_right ul .right_active {
color: blue;
}
</style>
</head>
<body>
<div class="box_left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="box_center">
<span class="left"> > </span>
<span class="right"> < </span>
<span class="all_left"> >> </span>
<span class="all_right"> << </span>
</div>
<div class="box_right">
<ul>


</ul>
</div>
<script>
$(function(){
$(".box_left ul").delegate(" li","click",function(){
$(this).addClass("left_active");
});


$(".box_right ul").delegate("li","click",function(){
$(this).removeClass("left_active").addClass("right_active");
});


//双击事件
// $(".box_left ul").delegate(" li","dbclick",function(){
//// $(this).addClass("left_active");
// alert("111");
// });


//从左移到右  单个移
$(".left").click(function(){
var l_str = $(".box_left ul").find(".left_active");
if(l_str.length < 1){
alert("请选择要移动的一项")
}
$(".box_left ul").find(".left_active").remove();
                $(".box_right ul").append(l_str);
});


//从左到右  全部
$(".all_left").click(function(){
var all_list = $(".box_left ul li");
if(all_list.length < 1){
alert("已经全部在右边")
}
$(".box_left ul li").remove();
$(".box_right ul").append(all_list);
});


//从右到左  单个移
$(".right").click(function(){
var r_str = $(".box_right ul").find(".right_active");
if(r_str.length < 1){
alert("请选择要移动的一项")
}
$(".box_right ul").find(".right_active").remove();
$(".box_left ul").append(r_str);
});


//从左到左 全部
$(".all_right").click(function(){
var all_list = $(".box_right ul li");
if(all_list.length < 1){
alert("已经全部在左边")
}
$(".box_right ul li").remove();
$(".box_left ul").append(all_list);
});
})
</script>
</body>

</html>


第二种是双击的


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
box-sizing: border-box;
}


.left_box, .right_box {
width: 200px;
height: 300px;
border: 1px solid #666666;
float: left;
margin: 3% 3%;
}


ul li {
list-style: none;
margin: 16% 16%;
border: 1px solid #999999;
text-align: center;
}
</style>
</head>
<body>
<div class="left_box">
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
</ul>
</div>
<div class="right_box">
<ul></ul>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
$(function () {
//左边移到右边
$(".left_box").delegate("li", "dblclick", (function () {
$(this).addClass("active");
var l_left = $(".left_box ul").find(".active");
$(this).remove();
console.log(l_left);
$(".right_box ul").append(l_left);
$(".right_box ul li").removeClass("active")
})
);


//右边移到左边
$(".right_box").delegate("li", "dblclick", (function () {
console.log("1111");
$(this).addClass("active");
var r_left = $(".right_box ul").find(".active");
$(this).remove();
console.log(r_left);
$(".left_box ul").append(r_left);
$(".left_box ul li").removeClass("active");
})
);
})
</script>
</body>
</html>

版权声明:本文为博主原创文章,但是为了方便学习可以随意转载。

相关文章推荐

jquery实现图片左右滚动

  • 2013-05-12 22:50
  • 245KB
  • 下载

jquery实现左右选择框

一、效果图 二、实现 New Document .sel{}{wi...

jquery实现图片的左右移动

  • 2012-07-27 16:23
  • 539KB
  • 下载

jquery实现可以左右选择的下拉菜单效果

可以左右选择的下拉菜单效果 //使用jquery加载事件 $(document).ready(function (){ /************************...

jQuery实现简单的图片轮播(二)-增加左右(或上下)翻页功能

1. 需求 上一篇文章《jQuery实现简单的图片轮播》实现的效果中,图片只能从右边出现,不能从左右都出现,所以本文将实现图片从左右(或上下)都可以出现的功能。 为避免与上一篇文章过多重复,本文中实现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)