时间:2021-05-26
本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下
html
<dl id="marquee" class="marquee"> <dt> <ul class="right-content"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> </li> ... </ul> </dt> <dd></dd></dl>js
<script> $(function(){ Marquee("marquee"); }) //订单滚动 var Marquee = function(id){ var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], liLength=original.getElementsByTagName("li").length, speed = 55; if(liLength<=8){ return } clone.innerHTML = original.innerHTML; var rolling = function(){ if (container.scrollTop === clone.offsetHeight) { container.scrollTop = 0; } else { container.scrollTop++; } } var timer = setInterval(rolling, speed)//设置定时器 container.onmouseover = function(){ clearInterval(timer) }//鼠标移到marquee上时,清除定时器,停止滚动 container.onmouseout = function(){ timer = setInterval(rolling, speed) }//鼠标移开时重设定时器 } </script>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了javascript实现文字无缝滚动的全部代码,供大家参考,具体内容如下效果图:实现代码:*{margin:0;padding:0;}.di
div+css+javascript实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox用marquee实现首尾相连循环滚动效果(仅IE):复制代
JavaScript无缝上下滚动加定高定宽停顿效果(兼容ie/ff)JavaScript无缝上下滚动加定高定宽停顿效果(兼容ie/ff)body{font-si
简单实现纵向无缝滚动(不要忘记引入jquery文件哦)看效果:1、HTML代码简单的jQuery无缝向上滚动效果简单的jQuery无缝向上滚动效果简单的jQue
实现一个文本无缝滚动的效果:文字滚动*{margin:0;padding:0;}body{padding:20px;}.textbox{border:1pxso