当前位置:首页 > 编程教程 > javascript技术文章 > javascript实现文字无缝滚动效果

使用javascript如何实现文字无缝滚动

  • 发布时间:
  • 作者:码农之家
  • 点击:91

这篇文章主要知识点是关于js、无缝滚动、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript前端开发案例教程
  • 类型:JS前端大小:75.1 MB格式:PDF作者:黑马程序员
立即下载

Tags:JS 无缝滚动 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.675472

js实现无缝滚动图(可控制当前滚动的方向)

这个版本可以控制左右滚动,鼠标点击对应的广告会自动滑动把广告完全展示出来。还实现了记录当前滚动的方向,当鼠标离开,接着继续滚动!!! 效果图: 代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" style type = "text/css" *{margin: 0; padding: 0;} li { list-style: none; } .box { width: 800px; height: 450px; margin: 50px auto; overflow: hidden; position: relative; } .box span { width: 40px; height: 60px; display: block; position: absolute; top: 225px; margin-top: -20px; cursor: pointer; z-index: 1; } .box #left { background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat; left: 0; display: none; } .box #right { background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat; right: 0; display: none; } #ad { width: 4000px; height: 450px; position: absolute; } #ad li { float: left; } /style script type = "text/javascri……

网友NO.519196

10行原生JS实现文字无缝滚动(超简单)

废话不多说,直接上代码 section class="pro_quota_tip" div class="tip_box" a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aaaaaaaaa/a a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" bbbbbbbbbbbbbb/a a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ccccccccccc/a a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ddddddddddddddd/a a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aaaaaaaaaaaaaa/a /div /section body,#app{ margin: 0; padding: 0; font-family:Helvetica; background: #f0efef !important; width: 100%; overflow-x: ……

网友NO.982142

js实现无缝滚动图

效果如下: 代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" style type = "text/css" ul, li { padding: 0; margin: 0; } li { list-style: none; } .box { width: 800px; height: 450px; margin: 50px auto; overflow: hidden; position: relative; } .box span { width: 40px; height: 60px; display: block; position: absolute; top: 225px; margin-top: -20px; cursor: pointer; z-index: 1; } .box #left { background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat; left: 0; } .box #right { background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat; right: 0; } #ad { width: 4000px; height: 450px; position: absolute; } #ad li { float: left; } /style script type = "text/javascript" window.onload = function(){ var ad = document.getElementById("ad"); var timer = null;//管理定时器 var leader = 0; //1秒之后再开启定时器 timer = setTimeout(function(){ timer = setInterval(autoAd,30); }……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757