百度上看到有人求下图效果，我简单作了一下，分享到这里：
我的图：
代码如下：
代码语言：javascript复制<style type="text/css">
#box,#box2{width:310px;height:310px; position:relative;}
#box span{ position:absolute; border:2px solid #fff; display:block; width:100px;height:100px; background:#aaa; font-size:50px; line-height:100px; text-align:center;}
#box span.on{ border:2px solid red}
#box2 span{ position:absolute; border:2px solid #fff; display:block; width:100px;height:100px; background:#ddd; font-size:50px; line-height:100px; text-align:center;}
#box2 span.on{ border:2px solid #F60}
</style>
<div id="box">
</div>
<div id="box2">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
for(i=0;i<9;i ){
$('#box').append('<span></span>')
$('#box2').append('<span></span>')
}
$('#box span').each(function(index) {
var t=parseInt(index/3);
var l=index%3;
$(this).css({'left':l*104,'top':t*104});
$(this).text(index 1)
$(this).click(function(){
$('#box span.on').removeClass('on')
$(this).addClass('on');
})
});
$('#box2 span').each(function(index) {
var t=parseInt(index/3);
var l=index%3;
$(this).css({'left':l*104,'top':t*104});
$(this).click(function(){
$('#box2 span.on').removeClass('on');
$(this).addClass('on');
$(this).text($('#box span.on').text())
$('#box span.on').hide();
})
});
})
</script>
