程序博客网 > 手机淘宝店铺入口

jquery 实现上下滚动

来源：互联网发布：手机淘宝店铺入口编辑：程序博客网时间：2024/05/16 15:39

<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
$(function() {
  var page = 1;
  var i = 1;
  var conheight = $('.con li').height();
  var lilen = $('li').length;
  var len = Math.ceil( lilen / i );
  alert(conheight+ "    " + len);
  //alert("page:"+page+" i:"+i+" conheight:"+conheight+" lilen:"+lilen+" len:"+len)
  $('.next').click(function() {
   if( page == len){
    alert("已经到底不能再在操作！");
    return false;
   }
   $('.con_list').animate({top:'-=' + conheight},'slow');
   page++;

   //if( page == len ) {
   // $('.con_list').animate({top:0},'slow');
   //  page = 1;
   // }else{
   //  $('.con_list').animate({top:'-=' + conheight},'slow');
   //  page++;
   //}
  });
  $('.prev').click(function() {
   if(page == 1){
    alert("已经到头不能再进行操作！");
    return false;
   }
   $('.con_list').animate({top:'+=' + conheight},'slow');
   page--;
   //if( page == 1 ) {
   // $('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow');
   // page = len;
   //}else{
   // $('.con_list').animate({top:'+=' + conheight},'slow');
   // page--;
   //}
  });
})
</script>

<style type="text/css">
* {
  margin:0;padding:0
}
.prev,.next{
  width:100px;height:20px;background:#333;cursor:pointer
}
.con{
  width:100px;height:300px;overflow:hidden;position:relative
}
.con_list{
  position:relative
}
.con li{
  height:100px
}
.one{
  background:#F90
}
.two {
  background:#69C
}
.three{
  background:#633
}
</style>

<body>
<div class="prev"></div>
<div class="con">
  <div class="con_list">
   <ul>
    <li class="one">11111111111111111111</li>
    <li class="two">22222222222222222222</li>
    <li class="three">333333333333333333333</li>
    <li class="three">444444444444444444444</li>
    <li class="one">5555555555555555555555</li>
    <li class="two">6666666666666666666666666</li>
    <li class="one">7777777777777777777777777</li>
    <li class="two">88888888888888888888</li>
    <li class="one">99999999999999999999</li>
    <li class="one">10103000000000</li>
   </ul>
  </div>
</div>
<div class="next"></div>

</body>

手机淘宝店铺入口

手机淘宝店铺入口

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子立式钢琴钢琴论坛怎样学钢琴五线谱钢琴钢琴课程品牌钢琴以什么钢琴我想买钢琴练钢琴好钢琴价格二手钢琴钢琴基本钢琴厂家学钢琴入门钢琴购买如何选钢琴钢琴的品牌什么的钢琴购钢琴钢琴的电钢琴价格钢琴是什么便宜钢琴钢琴考试钢琴多少级钢琴网站新钢琴那种钢琴好大钢琴北京钢琴城关于钢琴钢琴特价北京钢琴淄博钢琴买二手钢琴弹钢琴入门齐默曼钢琴广州钢琴钢琴多高钢琴独奏曲湖南钢琴