跑马灯组件

新年上班第一天，研究了下requirejs，其中一部分是对JQuery插件配置的API,即用shim属性，

require.config({
        shim:{
                "jquery.marquee":{
                        deps:["jquery"],
                        exports:"$.fn.marquee"
                }
        }
});

手懒没有找其它组件，现写了一个跑马灯的jQuery组件jquery.marquee.js，分享出来，供大家参考：

(function($){
        var old=$.fn.marquee;
        
        function Marquee(ele,options){
                this.ver='1.0';
                this.element=$(ele);
                this.options=$.extend({},$.fn.marquee.defaults, options);
                this.init();
        }
        
        Marquee.prototype={
                constructor:Marquee,
                init:function(){
                        var options=this.options,
                                $ele=this.element;
                        
                        $ele.text(options.text);
                        
                        setInterval(function(){
                                if(options.direction=="left"){
                                        var firstChar=$ele.text().charAt(0);
                                        $ele.text($ele.text().substring(1)+firstChar);
                                }else{
                                        var text=$ele.text(),
                                                l=text.length,
                                                lastChar=text.charAt(l-1);
                                        $ele.text(lastChar+text.substring(0,l-1));
                                }
                                
                        },options.timer);
                }
        };
        
        //jQuery插件
        $.fn.marquee=function(options){
                return this.each(function(){
                        var $this=$(this),
                                instance=$this.data('marquee');
                                
                        if(!instance){
                                instance=new Marquee(this,options);
                                $this.data('marquee',instance);
                        }else{
                                instance.init();
                        }
                });
        };
        
        $.fn.marquee.defaults={
                text:"",
                timer:100,
                direction:"left"
        };
        
        $.fn.marquee.noConflict=function(){
                $.fn.marquee=old;
                return this;
        };
        
})(jQuery);

requirejs使用方法：

require(["jquery.marquee"],function(marquee){
        $('#div1').marquee({
                text:"这里的文字滚动",
                timer:200,
                direction:"right"
        });
});

普通使用方法：

$('#div1').marquee({
                text:"这里的文字滚动",
                timer:200,
                direction:"right"
        });

这里有三个参数：text:是指滚动的文字，timer：滚动间隔，direction:滚动方向（left/right）。