jquery 视觉特效（图片内容滑动浏览器）

根据之前掌握的jquery，可以试着写一个类似有些网上商城，网站的图片滑动的效果。之前见过QQ，迅雷上都有见过。

描述：

左边一列的产品小图片，滑动到上面时，右边内容区域显示响应的大图。思路和前面有一篇文章一样。

我用的是table，只是做个演示效果。我不是做前端的，就当玩玩了。

HTML：

      <table id="tbl">
            <tr>
                <td width="84">
                    <a href="iphone.jpg"><img src="iphone.jpg" class="small" alt=""/></a>
                    <p>Iphone5 售价 4500RMB</p>
                </td>
                <td width="280" rowspan="4">
                    <img class="large" src="" alt=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="sanxing.jpg"><img src="sanxing.jpg" class="small" alt=""/></a>
                    <p>三星GALAXY NOTE II 售价 4100RMB</p>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="xiaomi.jpg"><img src="xiaomi.jpg" class="small" alt=""/></a>
                    <p>小米2 售价 2500RMB</p>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="nokia.jpg"><img src="nokia.jpg" class="small" alt=""/></a>
                    <p>诺基亚N9 售价 3600RMB</p>
                </td>
            </tr>
        </table>

CSS:

          body{
                /*如果不统一字体，FF和IE下汉字会不一样，造成一行显示的个数都不同*/
                font-family:"Times New Roman",Georgia,Serif;
                /*统一字体大小*/
                font-size: 10px;
            }

            #tbl{
                /*下面两个属性固定表格列，如果不设置，FF正常，IE会被字给撑开*/
                table-layout: fixed;
                word-break: break-all;
                /*让表格边框和td的边框融合*/
                border-collapse: collapse;
                /*设置表格边框*/
                border: 1px solid black;
                /*表格居中*/
                margin: auto;
            }

            td{
                /*设置td的表框*/
                border: 1px solid black;
            }

            img{
                border: 0;
            }

            img.small{
                width: 84px;
                height: 63px;
            }

            img.large{
                width: 280px;
                height: 210px;
            }

            p{
                /*图片下方文字居中显示*/
                text-align: center;
                /*默认P距离上下边距有一定的距离，故设置以下属性*/
                margin: 0px;
                padding: 0px;       
            }

            .hover{
                /*鼠标移动*/
                background: cyan;
            }

Jquery：

             $('a').hover(function(){
//                    鼠标划入时,当前的a,保存到一个变量里,方便后面操作
                    var $current_a = $(this);
//                    改变p的样式
                    $current_a.siblings('p').addClass('hover');
                    
                    $('.large').stop(true,true).animate({
                        'opacity':0
                    }, 'normal',function(){
                        var imgpath = $current_a.attr('href');
                        $('.large').attr('src', imgpath);
                    }).animate({
                        'opacity':1
                    },'normal');
                }, function(){
//                鼠标离开当前a,去掉p的样式
                $(this).siblings('p').removeClass('hover');
                })

截图（看不见鼠标）：