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 
  > 
 

 

 

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