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';