Created
July 30, 2014 00:46
-
-
Save apipkin/d7f81ec8e72d4db85bcb to your computer and use it in GitHub Desktop.
jQuery Plugin for a Marquee - See it at http://apipkin.jsbin.com/gorige/3/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .marquee { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| background: purple; | |
| color: white; | |
| padding: 6px 0; | |
| } | |
| .marquee > .message { | |
| position: relative; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <button class="start">Start</button> | |
| <button class="stop">Stop</button> | |
| <div class="marquee"> | |
| <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus vehicula elit sit amet viverra. Nunc scelerisque ligula vitae erat dignissim tempus. Quisque rutrum rutrum cursus. Nulla vitae semper elit, in aliquam dolor. Suspendisse a vulputate erat. Nulla facilisi. Etiam mollis quis orci eget tincidunt. Vivamus viverra at eros ut hendrerit. Nam sed feugiat ante. In hac habitasse platea dictumst. Praesent quis urna orci. Mauris tincidunt velit elit.</div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(function ($, undefined) { | |
| var pluginName = 'marquee', | |
| defaults = { | |
| selector: '.message', | |
| step: 13, | |
| delay: 70 | |
| }; | |
| function Plugin (element, options) { | |
| this.element = element; | |
| this.options = $.extend({}, defaults, options); | |
| options = this.options; | |
| this._defaults = defaults; | |
| this._name = pluginName; | |
| var _this = this, | |
| command = options.command, | |
| selector = options.selector, | |
| $message = $(element).find(selector), | |
| width = element.scrollWidth, | |
| parentWidth = $(element).width(), | |
| step = options.step, | |
| delay = options.delay, | |
| leftLimit = -(width + (parentWidth / 2)), | |
| _running = false, | |
| _timer; | |
| if (!$message.length) { | |
| throw Error('Marquee message could not be found'); | |
| } | |
| if ($message.css('left') === 'auto') { | |
| $message.css('left', parentWidth); | |
| } | |
| this.$message = $message; | |
| this.run = function () { | |
| this.reset(); | |
| _timer = setInterval(function () { | |
| if (_this._running) { | |
| var left = $message.position().left - step; | |
| if (left < leftLimit) { | |
| left = parentWidth; | |
| } | |
| $message.css('left', left); | |
| } | |
| }, delay); | |
| }; | |
| this.reset = function () { | |
| clearInterval(_timer); | |
| $message.css('left', parentWidth); | |
| }; | |
| switch (command) { | |
| case 'start': this.start(); break; | |
| case 'pause': this.pause(); break; | |
| case 'resume': this.resume(); break; | |
| case 'stop': this.stop(); break; | |
| } | |
| $(element).hover(function () { | |
| _this.mouseenter(); | |
| }, function () { | |
| _this.mouseleave(); | |
| }); | |
| } | |
| Plugin.prototype.start = function () { | |
| this._running = true; | |
| this.run(); | |
| }; | |
| Plugin.prototype.pause = function () { | |
| console.log('pause'); | |
| this._running = false; | |
| }; | |
| Plugin.prototype.resume = function () { | |
| this._running = true; | |
| }; | |
| Plugin.prototype.stop = function () { | |
| this._running = false; | |
| this.reset(); | |
| }; | |
| Plugin.prototype.mouseenter = function () { | |
| this.pause(); | |
| }; | |
| Plugin.prototype.mouseleave = function () { | |
| if (this.options.resumeDelay) { | |
| var _this = this; | |
| setTimeout(function () { | |
| _this.resume(); | |
| }, this.options.resumeDelay); | |
| } else { | |
| this.resume(); | |
| } | |
| }; | |
| $.fn[pluginName] = function (options) { | |
| var ns = 'plugin_' + pluginName; | |
| if (typeof options === 'string') { | |
| options = { | |
| command: options | |
| }; | |
| } | |
| console.log(options); | |
| return this.each(function () { | |
| if (!$.data(this, ns)) { | |
| $.data(this, ns, new Plugin(this, options)); | |
| } else { | |
| $(this).data(ns)[options.command](); | |
| } | |
| }); | |
| }; | |
| } (jQuery)); | |
| // OPTIONS API | |
| /* | |
| { | |
| selector: '.message', (CSS selector) | |
| step: 13, (milliseconds) | |
| delay: 170, (milliseconds) | |
| resumeDelay: null (milliseconds) | |
| } | |
| */ | |
| $('.marquee').marquee(); | |
| $('.start').click(function () { | |
| $('.marquee').marquee('start'); | |
| }); | |
| $('.stop').click(function () { | |
| $('.marquee').marquee('stop'); | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment