用js切割一张图片，然后再一个三成三的表格中展示九张小图片的代码怎么写？

以前看过这样的特效但是那源码找不到了求大神帮忙告诉下这种代码的思路，有没有类似的源码？

解决方案 »

  1.   

    那不是切割图片，
    是在小表格中设置背景图片,让其只显示大图片中的一小部分,并用background-position设置显示哪个部分
      

  2.   

    9个格子其实全部用的同一张图，只是计算出css样式
      

  3.   

    t3.jpg<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
    }
    img {
        border: 0 none;
    }
    .div01 {  
    width:200px;  
    height:200px;  
    background: url("t3.jpg") no-repeat;  
    }
    .div01{
    float:left;
    }
    /* 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 */
    .div01:nth-child(2){
    margin-left:30px;
    background-position:-200px 0px;
    }
    .div01:nth-child(3){
    margin-left:30px;
    background-position:-400px 0px;
    }
    .div02{
    float:left;
    width:200px;  
    height:200px;  
    background: url("t3.jpg") no-repeat;
    background-position:-0px -200px;
    }
    .div02:nth-child(2){
    margin-left:30px;
    background-position:-200px -200px;
    }
    .div02:nth-child(3){
    margin-left:30px;
    background-position:-400px -200px;
    }.div03{
    float:left;
    width:200px;  
    height:200px;  
    background: url("t3.jpg") no-repeat;
    background-position:-0px -400px;
    }.div03:nth-child(2){
    margin-left:30px;
    background-position:-200px -400px;
    }
    .div03:nth-child(3){
    margin-left:30px;
    background-position:-400px -400px;
    }.row01 .row02{
    display:block;
    }
    .row02{
    padding-top:30px;
    clear:both;
    }
    .row03{
    padding-top:30px;
    clear:both;
    }</style>
    </head><body><div class="row01">
        <div class="div01"></div>
        <div class="div01"></div>
        <div class="div01"></div>
    </div><div class="row02">
        <div class="div02"></div>
        <div class="div02"></div>
        <div class="div02"></div>
    </div><div class="row03">
        <div class="div03"></div>
        <div class="div03"></div>
        <div class="div03"></div>
    </div></body>
    </html>