纵向无缝隙滚动显示JS控制代码

来源：互联网发布：国内域名查询编辑：程序博客网时间：2024/05/16 05:22

<DIV id="Marquee_1_1" style="OVERFLOW: hidden; WIDTH:180px; HEIGHT:130px;"><DIV id="Marquee_1_2" align=left><ul style="width:170px;padding-left:10px;color:#7e0808;font-size:12px;"> <li>66 以于2011年03月17日成功报名钢琴</li> <li>66 以于2011年03月17日成功报名钢琴</li> <li>66 以于2011年03月17日成功报名钢琴</li> <li>66 以于2011年03月17日成功报名钢琴</li> <li>66 以于2011年03月17日成功报名钢琴</li> <li>66 以于2011年03月17日成功报名钢琴</li></ul></DIV><DIV id="Marquee_1_3"></DIV></DIV>

注：统一IE，FF中*的所有默认样式，滚动内容最好不加marging,padding等属性，注意清除浮动等，能获得好的无缝滚动效果

/* 纵向无缝隙滚动显示JS控制代码 */var speed = 40;var Marquee_1_1 = document.getElementById("Marquee_1_1");var Marquee_1_2 = document.getElementById("Marquee_1_2");var Marquee_1_3 = document.getElementById("Marquee_1_3");var Marquee_1_isMar = true;//判断当前是否需要滚动显示if (Marquee_1_1.style.pixelHeight){ Marquee_1_isMar = Marquee_1_2.offsetHeight > Marquee_1_1.style.pixelHeight;}else{ var Marquee_1_height = parseInt(Marquee_1_1.style.height.replace('%', '').replace('px', '')); Marquee_1_isMar = Marquee_1_2.offsetHeight > Marquee_1_height;}//需要滚动显示处理if (Marquee_1_isMar){ Marquee_1_3.innerHTML = Marquee_1_2.innerHTML; //实现滚动 function Marquee_1_function(){ if(Marquee_1_2.offsetHeight-Marquee_1_1.scrollTop<=0){ Marquee_1_1.scrollTop-=Marquee_1_2.offsetHeight; } else{ Marquee_1_1.scrollTop++ } }//实现滚动，添加鼠标事件 var Marquee_1_myMar=setInterval(Marquee_1_function,speed Marquee_1_1.onmouseover=function() {clearInterval(Marquee_1_myMar)} Marquee_1_1.onmouseout=function() {Marquee_1_myMar=setInterval(Marquee_1_function,speed)}}