jquery animate列表滚动

如题,用animate实现简单的列表数据滚动,可以通过按钮查看上一条和下一条数据! 实现效果如下: 引用文件:jquery.js

html

<section class="list">
<input type="button" value="up" />
<div id="parent">
 <div>
 <div id="inner">
 <p>这是列表数据1</p>
 <p>这是列表数据2</p>
 <p>这是列表数据3</p>
 <p>这是列表数据4</p>
 <p>这是列表数据5</p>
 <p>这是列表数据6</p>
 <p>这是列表数据7</p>
 <p>这是列表数据8</p>
 <p>这是列表数据9</p>
 <p>这是列表数据0</p>
 <p>这是列表数据11</p>
 </div>
 </div>
</div>
<input type="button" value="down" />
</section>

javascript

<script>
 $(function(){
 
 var up=$("input").eq(0);
 var down=$("input").eq(1);
 var inner=$("#inner");
 var h=$("#inner").find("p").height();
 var num=parseInt($("#parent").css("height"))-parseInt(inner.css("height"));
 
 if(parseInt(inner.css("marginTop"))==0){
 down.attr("disabled","disabled").css("color","yellow");
 }
 
 up.click(function(){
 if(parseInt(inner.css("marginTop"))<=num){
 up.attr("disabled","disabled").css("color","yellow");
 }else{
 down.removeAttr("disabled").css("color","#FFF");
 inner.animate({"marginTop":"-="+h});
 if(parseInt(inner.css("marginTop"))==num){
 up.attr("disabled","disabled").css("color","yellow");
 }
 }
 });
 down.click(function(){
 if(parseInt(inner.css("marginTop"))>=0){
 down.attr("disabled","disabled").css("color","yellow");
 }else{
 up.removeAttr("disabled").css("color","#FFF");
 inner.animate({"marginTop":"+="+h});
 if(parseInt(inner.css("marginTop"))==0){
 down.attr("disabled","disabled").css("color","yellow");
 }
 }
 });
 
 });
</script>

查看下载: 在线演示源码下载

觉得不错,赞助我:





0

效果图如下:

animate列表数据滚动

妹子对你感兴趣 2015/09/26 00:02

很多时候看似妹子在回应你,但实际上却并不是。兄弟说,哪怕这妹子骂我,我也舒服点,你生气不理我说讨厌我,我也觉得你在情绪波动,可你这么不温不火的,根本无从下手。那,到底聊什么,怎么聊才能让妹子对你感兴趣,对你产生好感。http://t.cn/RyiWH40

回复

夏日博客 2015/09/14 17:25

应该到前端效果很棒。

回复

boke112导航 2015/09/10 16:08

博主,你好,boke112导航特来拜会,发现贵站不错,已将贵站收录到博客导航的建站技术类,如有异议请留言哦!谢谢!PS:由于在贵站找不到留言板,所以在此留言告知,如造成困扰,请删除本评论,谢谢!

回复

jack 2015/08/25 15:12

嗯 这效果不错,期待继续更新!

回复