JS实现两张图片卷轴的切换效果

效果参见： http://weitwo.com/home.htm 引入jQuery后，

 

再引入如下JS:

$(document).ready( function  () {
     var  slidePicture  =   new  sliderPicture();
    slidePicture.containerId  =   ' container ' ;
    slidePicture.frontId  =   ' front ' ;
    slidePicture.minFrontWidth  =   100 ;
    slidePicture.load();
});

function  sliderPicture() {
     this .containerId  =   '' ;
     this .frontId  =   '' ;
     this .minFrontWidth  =   200 ;

     this .load  =   function  () {

         var  container  =  $( ' # '   +   this .containerId);
         var  front  =  $( ' # '   +   this .frontId);
         var  minWith  =   this .minFrontWidth;

        container.mousemove( function  (e) {
             var  offsetLeft  =  container.prop( " offsetLeft " );
             var  parentWidth  =  container.prop( " clientWidth " );
             var  left  =  e.clientX  -  offsetLeft; 
             var  width  =  parentWidth  -  left;

             if  (width  >=  minWith) {
                front.width(width);
            }
        });
    }
}

添加如下样式：

 

#container
{
    background : url('http://photocdn.sohu.com/20110527/Img308750491.jpg') ;
    width : 90% ;
    height : 200px ;
    margin : 0px auto ;
}
 
#front
{
    float : right ;
    background : url('http://news3.xinhuanet.com/auto/2005-07/06/xinsrc_3520702061714562873521.jpg') ;
    background-position : right ;
    width : 30% ;
    height : 100% ;
}

#splitter
{
    background : #000000 ;
    height : 100% ;
    float : left ;
    width : 5px ;
}

 

添加如下HTML：

 

< div  id ="container" >
     < div  id ="front" >
         < span  id ="splitter" ></ span >
     </ div >
   </ div >

 

 

即可实现图片卷轴的效果。