酷炫页面产品图片展示

平时看惯了一些基本的图片展示效果，今天给大家分享一个比较酷炫页面产品图片展示，感觉用在黑科技展示的效果会更好一点。
老规矩，先上图：

当我们拖动图片上那个红色的BAR时，作为分界线，两边的图片也会在各自和区域里显示自己的内容；
HTML代码：

<div id="content">
    <!-- 左边显示的图片 -->
    <div class="top">
        <img src="img/1.jpg" alt="" />
    </div>
    <!-- 右边显示的图片 -->
    <div class="bottom">
        <img src="img/2.jpg" alt="" />
    </div>
    <!-- 中间红色的Bar -->
    <div class="bar"></div>
</div>

CSS代码：

*{ margin: 0; padding: 0; }
#content{ width: 862px; height: 515px; border: 2px solid #000; margin: 20px auto; position: relative; }
.top{ width: 50%; position: absolute; left:0; top :0;z-index: 1;overflow: hidden; }
.bar{ width:10px; height:100%; background: red; position: absolute; left:50%;top:0; z-index: 2; }

JS代码：

<script>
$(function(){
    //  当鼠标在图片上移动 
    $('#content').bind('mousemove',function(e){

        var fullWidth=$(this).width(),mouseX=e.pageX-$(this).offset().left;

        if(mouseX<0){
            mouseX=0;
        }else if(mouseX>fullWidth){
            mouseX=fullWidth;
        }

        $('.bar').css({left:mouseX, transition:'none'});
        $('.top').css({width:mouseX, transition:'none'});
    });
    //  当鼠标离开图片
    $('#content').bind('mouseleave',function(){
        $('.bar').css({left:'50%', transition:'all 1s'});
        $('.top').css({width:'50%', transition:'all 1s'});
    })

});
</script>