阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Marquee 中文API文档

      插件 jQuery.Marquee 中文API文档

      源码 & 下载

      一个~8 KB(缩小的)jQuery插件,用于滚动文本,就像旧的传统选框一样。

      jQuery插件可以像旧的传统字幕一样滚动文本

      安装:

      CDN: jsdelivr.com

      <script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.5.0/jquery.marquee.min.js" type="text/javascript"></script>
      

      下载: https://github.com/aamirafridi/jQuery.Marquee/archive/master.zip

      链接:

      选项:

      • allowCss3Support即使目标浏览器支持CSS3动画,也强制使用jQuery的animate方法。默认:true
      • css3easingallowCss3Support设置为时工作true。请在此处查看完整列表。默认:‘linear’
      • easing需要jQuery 缓动插件。默认:‘linear’
      • delayBeforeStart选取框开始动画之前的时间(以毫秒为单位)。默认:1000
      • 方向选框将生成动画的方向’left' / ‘right’ / ‘up’ / ‘down’。默认值:‘left’。Todo:需要将此更改为ltr/rtl等
      • 重复是否应重复选取框以显示连续流动的效果。仅在文本短于容器时使用此选项。默认:false
      • 持续时间您希望元素移动的持续时间(以毫秒为单位)。默认值:5000。
      • 速度速度将覆盖持续时间。无论包含元素的宽度如何,Speed都允许您设置相对恒定的选取框速度。速度以每秒像素为单位。
      • 间隙之间的间隙以像素为单位。仅在duplicated选项设置为时才会起作用true。默认值:20。注意:20意味着20px不需要使用'20px’作为值。
      • pauseOnHover在悬停时暂停选取框。如果浏览器支持CSS3并且allowCss3Support设置为true这将使用CSS3完成。否则,这将使用jQuery Pause插件完成。默认值:false。例如,请参见演示页面。
      • pauseOnCycle在循环中,暂停选取框delayBeforeStart几毫秒。
      • startVisible如果设置为,则从一开始就可以看到选取框true。感谢@ nuke-ellington👍

      事件:

      • beforeStarting:在动画开始之前,将在元素上触发事件。
      • 完成:动画结束后将在元素上触发事件。
      • 暂停:当动画暂停时,将在元素上触发事件。
      • resumed:恢复动画时将在元素上触发事件。

      方法:

      这些方法可以像这样使用:

      • 首先使用任何选项初始化选取框 var $mq = $('.marquee').marquee();
      • 然后您可以随时调用以下方法: var $mq.marquee(‘NAME-OF-METHOD-AS-STRING’);

      以下是所有方法的列表:

      • 暂停:随时暂停选框。
      • resume:在暂停之后恢复选框。
      • 切换:在暂停和恢复方法之间切换。

      destroy:从元素中删除选取框。如果使用Ajax或其他字符串加载/更改数据,此方法很有用。你可以将它与finished事件结合起来,这样你就可以让选框显示一些数据,一旦完成显示,就可以销毁它,更改html,然后再次应用插件。有关详细信息,请参阅演示页面(上面提供的链接)。

      用法:

      HTML:

      通常将选取框类指定给所需的元素。然后在代码中使用选项哈希对其进行初始化(参见下文)。

      <div class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
      

      或者,您可以提供上面列出的所有选项作为数据属性:

      <div class='marquee' data-duration='5000' data-gap='10' data-duplicated='true' >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
      </div>
      

      CSS:

      .marquee {
        width: 300px; /* the plugin works for responsive layouts so width is not necessary */
        overflow: hidden;
        border:1px solid #ccc;
      }
      

      如何申请插件:

      /**
       * Example of starting a plugin with options.
       * I am just passing some of the options in the following example.
       * you can also start the plugin using $('.marquee').marquee(); with defaults
      */
      $('.marquee').marquee({
      	//duration in milliseconds of the marquee
      	duration: 15000,
      	//gap in pixels between the tickers
      	gap: 50,
      	//time in milliseconds before the marquee will start animating
      	delayBeforeStart: 0,
      	//'left' or 'right'
      	direction: 'left',
      	//true or false - should the marquee be duplicated to show an effect of continues flow
      	duplicated: true
      });
      

      如何使用方法:

      
      var $mq = $('.marquee').marquee();
      $('.someLink').click(function(){
        $mq.marquee('pause/resume/toggle');
      });
      

      更改内容并重新应用插件。查看演示页面,例如:http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

      $('.marquee')
      	.bind('finished', function(){
      		//Change text to something else after first loop finishes
      		$(this).marquee('destroy');
      		//Load new content using Ajax and update the marquee container
      		$(this).html('Some new data loaded using ajax')
      			//Apply marquee plugin again
      			.marquee()
      	})
      	.marquee();
      

      如何使用活动:

      查看演示页面,例如:http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

      $('.marquee')
          .bind('beforeStarting', function () {
              //code you want to execute before starting the animations
          })
          .bind('finished', function () {
              //code you want to execute before after each animation loop
          })
          //Apply plugin
          .marquee({
              duration: 2000
          });
      

      图片:

      如果您在选取框中使用图像,有时插件无法在图像仍在加载时计算准确的宽度。你可以试试这个而不是$(document).ready(function(){…})

      //if you have images in marquee
      $(window).load(function() {
          $('.marquee').marquee();
      });
      
      目录
      目录