简单的拼图游戏

百度上看到有人求下图效果，我简单作了一下，分享到这里：

我的图：

代码如下：

<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>