文字横向滚动,循环滚动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>文字横向滚动</title>
  <style>
    .txt-scroll{ width: 500px; height: 30px; line-height: 30px; padding: 0 5px 0 30px; }
    .txt-scroll .scrollbox{ width: 100%; white-space: nowrap; overflow:hidden; transition: all .2s; }
    .txt-scroll .txt,.txt-scroll .txt-clone{ display: inline; position: relative; }
  </style>

  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="txtscroll.min.js"></script>
</head>

<body>
  <div class="txt-scroll">
    <div class="scrollbox">
      <div class="txt">
        深圳市移联天下电子商务有限公司成立于2014年, 是集移动互联网新消费模式、。。。。。
      </div>
    </div>
  </div>
  <script>
    $('.txt-scroll').txtscroll({
      'speed': 20
    });
  </script>
</body>

</html>

txtscroll.js

/*
 * txtscroll - 基于jQuery的文本无缝循环滚动插件
 *
 * 作者: obear
 * 版本: 1.0
 * 创建日期: 2018-12-07
 * 
 * 使用说明:
 *          { 使用前请引入jQuery, 文本长度大于父级元素才可激活滚动,否则无滚动效果 }
 */

;(function ($) {
    "use strict";

    $.fn.txtscroll = function (options) {
        //默认参数
        //{
        //   speed - 滚动间隔时间
        //}
        
        var settings = $.extend({
            'speed': 50
        }, options);

        return this.each(function () {
            var $this = $(this);
            var $settings = settings;

            var scrollbox = $('.scrollbox',$this);
            var txt_begin = $('.txt',$this);
            var txt_end = $('<div class="txt-clone"></div>');
            var scrollVaue = 0;

            function marquee() {
                if (txt_end.width() - scrollbox.scrollLeft() <= 0){
                    scrollVaue = scrollbox.scrollLeft() - txt_begin.width();
                    scrollbox.scrollLeft(scrollVaue);
                } else{
                    scrollVaue = scrollVaue + 1;
                    scrollbox.scrollLeft(scrollVaue);
                }
            }

            if(txt_begin.width() > scrollbox.width()){
                txt_end.html(txt_begin.html());
                scrollbox.append(txt_end);

                var setmarquee = setInterval(marquee, $settings.speed);
                $this.on('mouseover', function(){
                    clearInterval(setmarquee);
                });
                $this.on('mouseout', function(){
                    setmarquee = setInterval(marquee, $settings.speed);
                });
            }
        });
    };
})(jQuery);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容