跑马灯组件
新年上班第一天，研究了下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）。