插件 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();
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了