跑马灯效果 例子 写法 利用闭包
跑马灯效果 例子 写法 利用闭包
var panel = new Ext.Panel({
region: "south",
xtype : 'panel',
height : 25,
items :[{
id : 'help',
xtype : 'panel',
listeners : {
afterrender : function(p){
p.getEl().dom.innerHTML = '';
var store = new Ext.data.JsonStore({
root: '',
autoLoad : true,
fields: [
{name : 'title' , mapping : 'Post.title'},
{name : 'url' , mapping : 'Post.url'},
{name : 'category', mapping : 'Post.category'}
],
proxy: new Ext.data.ScriptTagProxy({
url: 'http://km.oa.com/api/group/16028/articles?limit=9999'
}),
listeners : {
load : function(ds,records,opts){
if(records.length!==0){
new Marquee().run(records,50);
}
}
}
});
var Marquee = function(){
var dh = Ext.DomHelper;
var ul = dh.append('help', {tag: 'ul'});
var tpl = dh.createTemplate({
tag: 'li',
html: '<a href="{href}" onclick="{click}">{text}</a>'
});
var id = ''; //计时器ID
var el = null; //ul标记
var left = 0; //列表的left
var aniLeft = left; //记录当前运动时的left
var width = 0; //列表的宽度
//初始化跑马灯数据
var init = function(list){
for(var i = 0,len=list.length; i < len; i++){
var topic = list[i].data;
if(topic.category==='ijobs使用说明' && /^【iJobs】/.test(topic.title)){
tpl.append(ul, {
href :'javascript:void(0)',
click : 'window.open(\''+ topic.url +'\')',
text : topic.title
});
}
}
el = Ext.select('ul',false,p.getEl().dom).first();
left =el.getLeft(); //列表的left
aniLeft = left; //记录当前运动时的left
width = p.getWidth(); //列表的宽度
};
//鼠标悬停
var hover = function(id,speed) {
el.on('mouseover',function(){
clearInterval(id);
});
el.on('mouseleave',function(){
id =setInterval(marquee, speed);
});
};
//跑马灯效果
var marquee = function(){
var li = Ext.select('li',false,p.getEl().dom);
var fw = li.first().getWidth();
aniLeft--;
if(aniLeft === -fw){
if(li.elements.length!==1){
var first = li.first();
first = Ext.apply({},{
tag : 'li',
html : first.dom.innerHTML
});
li.first().remove();
dh.insertAfter(li.last(), first);
aniLeft = 0;
}else{
aniLeft = width;
}
}
el.setLeft(aniLeft);
};
return {
run : function(list,speed){
init(list);
id = setInterval(marquee, speed);
hover(id,speed);
}
}
};
}
}
}]
});
return panel;
