最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

javascript实现文字无缝滚动效果

来源:懂视网 责编:小OO 时间:2020-11-27 22:31:47
文档

javascript实现文字无缝滚动效果

本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下: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>;<;BKCSHC161014002153<;/a>;<;/li>;<;li>;<。
推荐度:
导读本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下: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>;<;BKCSHC161014002153<;/a>;<;/li>;<;li>;<。

本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下

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>

文档

javascript实现文字无缝滚动效果

本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下: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>;<;BKCSHC161014002153<;/a>;<;/li>;<;li>;<。
推荐度:
标签: 设置 文字 实现
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top