点击实现翻页（关键定位）

CSS

<style type="text/css">
body { cursor:default; -webkit-text-size-adjust:none; font-size:13px;line-height:50px; }
.clear { zoom:1; }
.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
.main { line-height:23px!important; line-height:28px; *height:20px;
_height:15px; background:#333; color:#fff; overflow:hidden; }
.text {color:#f00;width:640px;margin:0 auto; position: relative;height:52px; overflow: hidden;}
.text ul{position: absolute;top:0;left:0}
.text li{border:1px #f0f solid;margin:2px 0; text-align:center;height:20px;line-height:20px;width:600px;}
</style>

 

HTML

<div class="text">
    <ul>
        <li><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li><a href="javascript:void(0)">6</a></li>
        <li><a href="javascript:void(0)">7</a></li>
        <li><a href="javascript:void(0)">8</a></li>
        <li><a href="javascript:void(0)">9</a></li>
        <li><a href="javascript:void(0)">10</a></li>
    </ul>
</div>
<div class="pre" align="center">上一页</div>
<div class="next" align="center">下一页</div>

 

JS

$(function(){
    var text=$(".text"),
    textul=text.find("ul"),
    li=text.find("li"),
    prev=$(".pre"),
    next=$(".next"),
    li_top=0,
    liheight=26*2;//li的高度乘以显示的个数
    lilength=li.length,
    ulheight=textul.height();
    prev.click(function(){
        var posTop=parseInt(textul.css("top"));
        if(posTop<0)
          {
            posTop=posTop+liheight;
            textul.stop().animate({top:posTop});
        }else{
            textul.stop().animate({top:0});
        }
    });
    next.click(function(){
        var posTop=parseInt(textul.css("top"));
        if(posTop>=52-ulheight)
          {
            posTop=posTop-liheight;
            textul.stop().animate({top:posTop});
        }else{

        }
    });

})

截图效果