87,901
社区成员
发帖
与我相关
我的任务
分享
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#div1,#div2 {width:550px;height:565px;overflow-y:scroll;border:1px solid #000;overflow-style:marquee,panner;}
#div2{ position:absolute;left:720px;top:28px;}
#hk2,#hk1,#hk3,#hk4,#hk5,#hk6{width:158px;height:180px;padding-left:10px;margin:2px;
background-color:#eee;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;float:left;}
.bn1,.bn2{ width:85px;height:31px; border:none;outline:none;cursor:pointer;background:url(bn.png) left top no-repeat;color:#fff;font-size:16px;font-weight:bold;}
.bn1{ position:absolute;left:600px;top:180px;}
.bn2{ position:absolute;left:600px;top:260px}
.aaa{background:red!important;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="doy">
<div id="div1">
<div id="hk1" >
</div>
<div id="hk2" >
</div>
<div id="hk3" >
</div>
<div id="hk4" >
</div>
<div id="hk5" >
</div>
<div id="hk6" >
</div>
</div>
<div id="div2">
</div>
<!--点击-->
<input type="button" class="bn1" onclick="left_click()" value=">">
<input type="button" class="bn2" onclick="right_click()" value="<">
</body>
</html>
<script>
$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
function left_click(){
var aaa = $('#div1 .aaa');
aaa.appendTo('#div2').removeClass('aaa');
for(var i = 0; i < aaa.length; i++){
$('#div1').append("<div id='hk1'>xxxxx</div>");
}
}
function right_click(){
var aaa = $('#div2 .aaa');
aaa.appendTo('#div1').removeClass('aaa');
for(var i = 1; i < aaa.length; i++){
$('#div1 aaa.length-1').remove();
}
}
</script>