2013-10-31 21 views
0

我正在使用动态驱动器的跨浏览器选取框II滚动条脚本find here。我有一些帮助来改变脚本,其中内容在页面加载时具有随机的StartIndex,并且随机部分工作良好;该论坛的主题是here。我现在遇到的问题是,改变的脚本不会在MouseOver函数上产生暂停。我制作了一个JSFiddle here并尝试了所有我能想到的方法来修复它,但是我被卡住了。 JavaScript如下:在MouseOver上暂停不能使用跨浏览器选框II

function scrollmarquee() { 
    if (parseInt(cross_marquee.style.top) > (actualheight * (-1) + 8)) { 
     cross_marquee.style.top = parseInt(cross_marquee.style.top) - copyspeed + "px"; 
    } else { 
     cross_marquee.style.top = parseInt(marqueeheight) + 8 + "px"; 
    } 
} 

function marqueescroll(o) { 
    marqueePause(o.id); 
    o.srt += o.ss; 
    if ((o.ss < 0 && o.srt > o.h) || (o.ss > 0 && o.srt < o.ph)) { 
     o.s.style.top = o.srt + 'px'; 
    } else { 
     o.srt = o.ss < 0 ? o.ph : o.h; 
     o.s.style.top = o.srt + 'px'; 
    } 
    o.to = setTimeout(function() { 
     marqueescroll(o); 
    }, 60); 
} 

function marquee(o) { 
    var id = o.ID, 
     ss = o.Speed, 
     i = o.StartIndex, 
     srt = o.AutoDelay, 
     p = document.getElementById(id), 
     s = p ? p.getElementsByTagName('DIV')[0] : null, 
     ary = [], 
     z0 = 0; 
    if (s) { 
     var clds = s.childNodes, 
      o = marquee[id] = { 
       id: id, 
       p: p, 
       h: -s.offsetHeight, 
       ph: p.offsetHeight, 
       s: s, 
       ss: typeof (ss) == 'number' && ss != 0 ? ss : -2, 
       srt: 0 
      } 
     for (; z0 < clds.length; z0++) { 
      if (clds[z0].nodeType == 1) { 
       ary.push(clds[z0]); 
      } 
     } 
     ary[i] ? o.srt = -ary[i].offsetTop : null; 
     o.s.style.position = 'absolute'; 
     o.s.style.top = o.srt + 'px'; 
     typeof (srt) == 'number' && srt > 1 ? marqueeAuto(id, srt) : null; 
    } 
} 

function marqueeAuto(id, ms) { 
    var o = marquee[id]; 
    o ? o.to = setTimeout(function() { 
     marqueescroll(o); 
    }, ms || 200) : null; 
} 

function marqueePause(id) { 
    var o = marquee[id]; 
    o ? clearTimeout(o.to) : null; 
} 

function marqueeInit() { 
    marquee({ 
     ID: 'marqueecontainer', // the unique ID name of the parent DIV.(string) 
     AutoDelay: 2000, //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll) 
     Speed: -1, //(optional) the scroll speed, < 0 = up. > 0 = down.   (number, default = -2) 
     StartIndex: Math.floor(Math.random() * 4) //(optional) the index number of the element to start.   (number, default = 0) 
    }); 
} 

if (window.addEventListener) window.addEventListener("load", marqueeInit, false); 
else if (window.attachEvent) window.attachEvent("onload", marqueeInit); 
else if (document.getElementById); 
window.onload = marqueeInit; 

这可能是一个真正简单的修复我只是没有捕捉到。任何帮助将不胜感激。另外,有没有人知道一种方法来使滚动器的最后一个和第一个项目之间没有空格在列表中滚动?

回答

0

这现在已经修复,并完全跨浏览器和twitter引导友好。你可以看看新编辑的jsfiddle here。固定javascript如下:

function marqueescroll(o) { 
    marqueePause(o.id); 
    o.srt += o.ss; 
    if ((o.ss < 0 && o.srt > o.sz) || (o.ss > 0 && o.srt < (o.w ? -o.sz : o.psz))) { 
    o.s.style[o.m] = o.srt + 'px'; 
    } else { 
     o.srt = (o.w ? 0 : o.ss < 0 ? o.psz : o.sz) + o.ss; 
     o.s.style[o.m] = o.srt + 'px'; 
    } 
    o.to = setTimeout(function() { 
     marqueescroll(o); 
    }, 30); 
} 

function marquee(o) { 
    var id = o.ID, 
     m = o.Mode, 
     ss = o.Speed, 
     i = o.StartIndex, 
     srt = o.AutoDelay, 
     p = document.getElementById(id), 
     s = p ? p.getElementsByTagName('DIV')[0] : null, 
     clds = s ? s.childNodes : [], 
     ary = [], 
     sz, l, z0 = 0; 
    if (s && !marquee[id]) { 
     var m = typeof (m) == 'string' && m.charAt(0).toUpperCase() == 'H' ? ['left', 'offsetLeft', 'offsetWidth'] : ['top', 'offsetTop', 'offsetHeight'], 
      sz = p[m[2]], 
      slide = document.createElement('DIV'), 
      c; 
     slide.style.width = 'inherit',//added this for fluid bootstrap width 
     slide.style.position = s.style.position = 'absolute'; 
     for (; z0 < clds.length; z0++) { 
      if (clds[z0].nodeType == 1) { 
       if (m[0] == 'left') { 
        clds[z0].style.position = 'absolute'; 
        clds[z0].style.left = sz * ary.length + 'px'; 
        clds[z0].style.top = '0px'; 
       } 
       ary.push([clds[z0], clds[z0][m[1]]]); 
      } 
     } 
     l = ary[ary.length - 1][0]; 
     o = marquee[id] = { 
      m: m[0], 
      id: id, 
      p: p, 
      sz: -(l[m[1]] + l[m[2]]), 
      psz: sz, 
      s: slide, 
      ss: typeof (ss) == 'number' && ss != 0 ? ss : -2, 
      w: o.Wrap !== false 
     } 
     o.s.appendChild(s); 
     c = s.cloneNode(true); 
     c.style.left = c.style.top = '0px'; 
     c.style[m[0]] = o.sz * (ss > 0 ? 1 : -1) + 'px'; 
     o.w ? o.s.appendChild(c) : null; 
     o.srt = ary[i] ? -ary[i][1] : 0; 
     o.s.style.position = 'absolute'; 
     o.s.style[m[0]] = o.srt + 'px'; 
     p.appendChild(o.s); 
     p.style.overflow = 'hidden'; 
     typeof (srt) == 'number' && srt > 1 ? marqueeAuto(id, srt) : null; 
    } 
} 

function marqueeAuto(id, ms) { 
    var o = marquee[id]; 
    o ? o.to = setTimeout(function() { 
     marqueescroll(o); 
    }, ms || 200) : null; 
} 

function marqueePause(id) { 
    var o = marquee[id]; 
    o ? clearTimeout(o.to) : null; 
} 

function marqueeInit() { 

    marquee({ 
     ID: 'marqueecontainer', // the unique ID name of the parent DIV.      (string) 
     Mode: 'vertical', // the display type, 'vertical' or 'horizontal'     (string. defalut = 'vertical') 
     AutoDelay: 2000, //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll) 
     Speed: -2, //(optional) the scroll speed, < 0 = up. > 0 = down.   (number, default = -2) 
     Wrap: true, //(optional) true = no gap, false = gap.      (boolean, default = true) 
     StartIndex: Math.floor(Math.random() * 4) //(optional) the index number of the element to start.   (number, default = 0) 
    }); 

} 

if (window.addEventListener) window.addEventListener("load", marqueeInit, false); 
else if (window.attachEvent) window.attachEvent("onload", marqueeInit); 
else if (document.getElementById) window.onload = marqueeInit;