JS操作文字纵向滚动

  • A+
所属分类:.NET技术
摘要

1、HTML:CSS:JS: 

1、HTML:

 <div id="leftda">                 <ul class="leftmenu" id="leftmenu">                     <li id="1" style="background-image:url(img/2.png);"><span id="span1"></span>商品住房公积金贷款审批</li>                     <li id="2"><span id="span2"></span>国有土地上房屋征收政策咨询</li>                     <li id="3"><span id="span3"></span>预告登记变更登记</li>                     <li id="4"><span id="span4"></span>集体建设用地使用权首次登记</li>                     <li id="5"><span id="span5"></span><div id="begin_5" style="display: inline-block;">集体建设用地使用权及建筑物、构筑物所有权登记注销登记</div><div id="end_5"></div></li>                     <li id="6"><span id="span6"></span><div id="begin_6" style="display: inline-block;">委托按月划转提取公积金归还贷款本息服务</div><div id="end_6"></div></li>                     <li id="7"><span id="span7"></span><div id="begin_7" style="display: inline-block;">因重大疾病造成家庭生活严重困难提取住房公积金</div><div id="end_7"></div></li>                 </ul>             </div>

CSS:

#leftda {     position:absolute;     top:80px;     left:60px;     height:420px;     overflow: hidden; } .leftmenu>li{     background-image:url(../img/1.png);     background-repeat: no-repeat;     list-style:none;     font-size: 18px;     width:260px;     height:60px;     line-height:60px;     text-align:center;     margin-bottom:10px;     cursor:pointer;     overflow: hidden;     white-space: nowrap; }

JS:

1、首先利用clientHeight获取leftda高度:var leftdaheight = document.getElementById("leftda").clientHeight;//菜单栏外层div的高度

2、再获取内容#leftmenu的高度
3、设置一次向上或者向下的高度(这里设置的是li标签的高度)
4、计算向上或者向下时每次追加li的高度变为内容的顶部和外层盒子的顶部的距离
 document.getElementById("leftmenu").style.marginTop = -topheight + 'px';