仿Yahoo跑馬燈

by Ryan

HTML

<br>
<br>
<br>
<div id="demoDiv">
	<ul id="demoUl">
		<li nowrap><a href="">【開課快訊】04/11 JavaScript ＆ CSS 互動程式入門班 (週日班)xxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></li>
		<li><a href="">【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查1</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查2</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查3</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查4</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查5</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查6</a></li>
		<li><a href="">【調查】你的獎品你來決定 - 活動獎品大調查7</a></li>
	</ul>
</div>

CSS

#demoDiv{width: 550px;}

JavaScript

;(function ( $, window, document, undefined ) {

    var pluginName = "r_marquee" ;
    var defaults = {} ;
	defaults.speed = 2000 ;
	defaults.li_Height = 25 ;
	
    function Plugin( element, options ) {
        this.element = element;
		this.$element = $(element) ;
		this.options = $.extend( {}, defaults, options) ;
		
		//charactors
		this.players = {} ;
		this.players.div = this.$element ;
		this.players.ul = this.$element.find('ul') ;
		
		this.timer = 0 ;
		this.size = this.players.ul.find('li').size() ;
        this.init();
    }

    Plugin.prototype = {
        init: function() 
		{
			var _this = this ;
			
			_this.doCss() ;
			_this.players.ul.find('li').first().clone().appendTo(_this.players.ul) ;
			_this.doLoop() ;
        },
		
		doCss: function()
		{
			var _this = this ;
			
			_this.players.div
				.css({
					  margin: 0
					, padding: 0
					, border: '1px solid black'
					, height: _this.options.li_Height + 'px'
					, overflow: 'hidden'
				}) ;
				
			_this.players.ul
				.css({
					  margin: 0
					, padding: 0
					, position: 'relative'
				})
				.find('li')
				.css({
					  margin: 0
					, padding: 0
					, whiteSpace: 'nowrap'
					, lineHeight: _this.options.li_Height + 'px'
					, marginLeft: '5px'
					, textDecoration:'none'
					, listStyleType: 'none'
				})
				.find('a')
				.css({
					textDecoration: 'none'
				}) ;
		},

		doLoop: function()
		{
			var _this = this ;
			setInterval(function()
			{
				_this.doAnimate() ;
			}, _this.options.speed) ;
		},
		
		doAnimate: function()
		{
			var _this = this ;
			_this.timer++ ;
			_this.players.ul.animate(
				{
					top: "-=" + _this.options.li_Height
				}, 500, function()
				{
					if (_this.timer%_this.size === 0)
					{
						_this.players.ul.css('top', 0) ;
					}
				}) ;
		}
	};

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" +...