【jQuery】仿IPhone的滑动操作效果

只能用鼠标而不是用手哟。

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title >  New Document  title >
< style >
img { border : 0px ;  cursor : pointer ; }
style >
< script  type ="text/javascript"  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" > script >
< script  type ="text/javascript" >
$(document).ready( function (){
     var  $mouseX  =   0 ;  // 鼠标X轴坐标
     var  $scrollLeft  =   0 ;  // 滑动位置标记
     var  $width  =   0 ;
     // 初始化
    ( function  init(){
        $( " #play_list " ).scrollLeft($scrollLeft);  // 回到第一帧
        $( " #play_list a " ).click( function (){ return   false ;})  // 取消所有click
    })();
     // 开始工作，记录鼠标位置
    $( " #play_list img " ).mousedown( function (e){$mouseX  =  e.pageX; return   false ;    });

    $( " #play_list img " ).mouseup( function (e){
         if ($mouseX  >   0 ){
             var  $move  =  $mouseX - e.pageX; // 滑动偏移量
             // 点击处理
             if ($move == 0 ){
                window.location  =  $( this ).parent().attr( " href " );
                 return   false ;
            }            
            $mouseX  =   0 ;$width  =   0 ;  // 还原设置值
            $( this ).parent().prevAll().each( function () {$width  +=  $( this ).width();    });  // 前面元素宽度累加
            $scrollLeft  =  $width + $( this ).width()  *  (($move  >   0 ) ? 1 : - 1 );  // 1为向左滑动 -1这向右滑动
            $( " #play_list " ).animate({ scrollLeft: $scrollLeft }, 500 );  // 设置滑动位置及动画效果
        }
         return   false ;
    });

     // 图片跟随鼠标滑动
    $( " #play_list img " ).mousemove( function (e){
         if ($mouseX  >   0 ){
             var  $move  =  $scrollLeft  +  $mouseX - e.pageX; 
            $( " #play_list " ).scrollLeft($move);
        }
         return   false ;
    });
});
script >
head >
< body >
< div  id ="play_list"  style ="overflow:hidden; width:341px; height:191px; white-space:nowrap;" >
                                                 < a  href ="http://koyoz.com/1.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/1.jpg"  alt ="相恋9年尔冬升再婚娶相恋9年女友"   />
                         a >
                    
                         < a  href ="http://koyoz.com/2.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/2.jpg"  alt ="恋情变贤周海媚公开6年恋情变贤妇"   />
                         a >
                    
                         < a  href ="http://koyoz.com/3.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/3.jpg"  alt ="为啥这么“熊猫”阿宝为啥这么红？"   />
                         a >

                    
                         < a  href ="http://koyoz.com/4.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/4.jpg"  alt ="男友被捕安妮-海瑟薇前男友被捕"   />
                         a >
                    
                         < a  href ="http://koyoz.com/5.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/5.jpg"  alt ="开价一亿天后王菲“复出”开价一亿"   />
                         a >
                    
                         < a  href ="http://koyoz.com/6.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/6.jpg"  alt ="赞郑伊健阿Sa赞郑伊健“保存”得好"   />
                         a >

                    
                         < a  href ="http://koyoz.com/7.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/7.jpg"  alt ="死跑龙套北影演员：甘当‘死跑龙套的’"   />
                         a >
                    
                         < a  href ="http://koyoz.com/8.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/8.jpg"  alt ="潘玮柏死潘玮柏死盯辣妹脱衣解带"   />
                         a >
                    
                         < a  href ="http://koyoz.com/9.jpg" >
                             < img  src ="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/9.jpg"  alt ="张曼玉分尔冬升深爱张曼玉分手发呆"   />
                         a >
div >
body >
html >