您的位置:首页> 日志> 前端技术 正文
DTOP

武汉小学班级主页制作分享

RockSoar | 2012年06月29日 |

>>收藏本文 已有 0条评论

    在武汉小学这个项目的班级主页上,一开始碰到了些问题。以前的思路是 #wUL1 定一个宽带,如果里面的 dl 超出了这个宽带就只显示Y轴的滚动条。效果图如下:

HTML代码,如下

    但是在实际的CSS编写时,这样并没有预期的效果出来。
.bjList { height: 300px;overflow-x: scroll;width: 480px;}
这样出来还是会有y轴的滚动条,就算用样式强制不显示y轴滚动条也无效。最后发现要给.oo定义个具体的宽度,而已这个宽度要根据dl的数量来定,如果定太宽滚动轴就很长,拉到后面就没有内容了。所以这个只能是动态的宽度了,那就要JS出马了。

<script type="text/javascript">
$(document).ready(function(){
  var bigK = $('#main .bjList').length;

  //这个是武汉小学和寄宿学校的,自动识别添加更多的学校
  for(var i = 1;i < bigK + 1;i++)
  {
    $('#wUL' + i).width(82*$('#wUL' + i).children("dl").length);

   //主要代码在这里,获取'#wUL' + i这个div下的dl元素的个数,乘以82就是一个dl的宽
   }
});
</script>