我使用的动态驱动器的交叉浏览器Marquee滚动脚本在这里找到。我得到了一些帮助来修改脚本,其中的内容在页面加载上会有一个随机的StartIndex,并且随机部分工作得很好;论坛线程就是这里。我现在遇到的问题是,修改后的脚本没有产生MouseOver函数的暂停。我做了一个JSFiddle 这里,并尝试了我所能想到的一切来修复它,但是我被困住了。JavaScript如下:
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;这可能是一个很简单的解决办法,我就是抓不到。任何帮助都将不胜感激。另外,有没有人知道在列表中滚动的最后一项和第一项之间没有空白处的滚动辊的方法?
发布于 2013-10-31 21:45:37
这一点现在已经解决了,完全跨浏览器和twitter引导友好。您可以查看新编辑的jsfiddle 这里。修正的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;https://stackoverflow.com/questions/19698080
复制相似问题