Goodspeed

导航

【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>

posted on 2009-04-04 18:13  Goodspeed  阅读(3354)  评论(4)  编辑  收藏  举报