使用这个jQuery插件可以让鼠标移动到图片上之后看见图片分割向四周隐藏的特效，之后会显示被图片遮盖下的内容。鼠标移开，图片会自动复原，遮盖上底部的内容。

使用方法

在HTML中引入jCutter、jquery-easing.1.2.pack和jQuery的JS

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jCutter.js"></script>
    <script type="text/javascript" src="js/jquery-easing.1.2.pack.js"></script>

CSS样式

        .wrap{
            width:940px;
            margin:0 auto;
        }
        .info{
            margin:30px;
        }
        .jcutter{
            width:300px;
            height:200px;
            overflow:hidden;
            position:relative;
            background:#ccc;
            cursor:pointer;
        }
        .jcutter-content{
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
        }
        .jcutter img{
            position:absolute;
            width:100%;
            height:100%;
            z-index:1;
        }

HTML结构

    <div class="wrap">
        <div class="info">
            <p>鼠标移动到图片上可以看见图片分割向四周隐藏的特效，之后会显示在图片遮盖下的内容。</p>
            <p>鼠标移开，图片会自动复原。</p>
        </div>
        <div class="jcutter">
            <img src="images/1.jpg" alt="">
            <div class="jcutter-content">
                我是被遮盖的内容
            </div>
        </div>
    </div>

初始化插件

        $(document).ready(function(){
            options={
                'speedIn':600,
                'speedOut':400,
                'easeIn':'easeOutBounce',
                'easeOut':''
            }
            $('.jcutter').jCutter(options);
        })