模拟手机界面效果

最近在项目中遇到了一个手机界面的效果，比较简单 主要是模拟手机屏幕内容滚动。但是由于每一屏的内容又是滚动的，所以如何避免滚动条随着屏幕滚动成为必需。

做法是 使用一个假的滚动条在容器滚动的时候遮住真正的滚动条，在滚动结束又使得该假滚动条隐藏，这就造成了滚动条静止的假象。另外自动检测内容数目和更新页数也都是常用的方法，无需多说，直接看效果：

点击图片查看DEMO

下面是代码：

代码和注释
$(function(){
    
    var p=1; //起始页码
    var curpage=$("#curpage"); //当前页码容器
    var pagelen=$(".phonescr").length;     //获得有多少页内容
    var total=$("#total"); //总页数容器
    var hi=222;     //手机屏幕高度
    var speed=800; //滚动时间
    total.html(pagelen); //初始化总页数
    var roller=$("#roller"); //滚动容器
    var rollbar=$("#rollbar"); //假滚动条
    roller.css({"height":hi*pagelen+"px"}); //初始化滚动容器高度
    
    function countpage(){ //计数器更新当前页数
        curpage.html(p);        
        }
    countpage();  //初始化页数
    function showscr(){    //切换显示内容    
        $(".phonescr").eq(p-1).show().siblings(".phonescr").hide();
        countpage();
        }
    function rollscr(){ //滚动显示内容
        rollbar.show(); //显示一下假的滚动条 造成滚动条静止的假象
        roller.stop()
        .animate(
        {"top" : -(hi*(p-1))+"px"},
        {duration: speed, 
         easing: "easeInOutBack",
         complete: function(){
             rollbar.hide(); //滚动完成后隐藏假滚动条
             countpage(); //再次更新当前页数
             }
         });        
        }    
    function page( x ){    //控制显示的函数        
        if((x==-1&&p>1)||(x==1&&p<pagelen) ){
            p+=x;
            if($.browser.mozilla){ //Firefox 下有问题 不知为何~ 只好屏蔽掉滚动效果
                showscr()
                }else{
                 rollscr();    
                    }
            }
        }
    $("#next").click(function(){page( 1 )  }) //上一页
    $("#prev").click(function(){page( -1 ) }) //下一页
    

转载于:https://www.cnblogs.com/trance/archive/2009/07/23/1529358.html