setTimeout() 使用 iframe 移动 div 仅在 Firefox 中导致闪烁
我有一个用 javascript 创建的水平滚动条,可以在 IE 中使用 和 Chrome,但是我在 Firefox 2 和 3 中出现闪烁。 正在移动的包含一个带有图像和文本的 iframe 定位div。 (参见下面的代码。)
问题:
1)内容出现在 div 的左侧或右侧 动画 div 似乎在 style.left 移动到相邻 div“下方”的一侧闪烁。 这种情况仅发生在 Firefox 中。
2)似乎当使用鼠标悬停处理程序大约 10 秒(仅在 Firefox 中)动画暂停大约一秒,并且 然后再次开始。 在 IE 或 Chrome 中都不会发生这种情况。
javascript 为:
<script type="text/javascript">
//outtake
function scrollframeleft() {
var divmenuleft = getLeft("divMenu");
var framewidth = parent.frames["framecontent"].scrollwidth;
var scrollportal = 740;
var scrollCatch = 13;
if (!noScroll && divmenuleft <=scrollCatch) {
divMenuObjStyle.left=(divmenuleft+scrollDistVar)+'px'
t = setTimeout("scrollframeleft();",scrollSpeedVar)
}
}
</script>
HTML 为:
<div id="divBg" style="position:absolute; z-index:10; top:415px; left:13px; width:740px; height:100px; clip:rect(0px 740px 102px 13px); visibility:visible;">
<div id="divMenu" style="position:absolute; z-index:10; top:0px; left:13px; color:#FFFFFF; visibility:visible;">
<iframe name="framecontent" id="framecontent" frameborder="0"
height="100" width="5000" scrolling="no" src="/content.php">
</iframe>
</div>`
</div>
<div id="divArrowLeft" style="position:absolute; z-index:204; left: 136px; top:398px;">
<a href="#" onmouseover="noScroll=false;scrollframeleft()"
onmouseout="noMove()" onclick="void blur()"><img
src="/images/leftarrow_sm.gif" width="14" height="14" alt="more news scroll left" border="0"></a>
</div>
感谢您的支持!
I have a horizontal scroll created in javascript that works in IE
and Chrome, however I get a flicker in Firefox 2 and 3. The div
that is moving contains an iframe with images and text with absolutely
positioned divs. (see code below.)
Problems:
1) The content appearing in either the div to the left or the right of
the animating div appears to flicker on the side where the style.left is moving "under" the adjacent divs. This occurs in Firefox only.
2) It seems that when using the mouseover handler for approximately 10
seconds (in Firefox only) the animation pauses for about a second, and
then starts again. This does not occur in either IE or Chrome.
The javascript is:
<script type="text/javascript">
//outtake
function scrollframeleft() {
var divmenuleft = getLeft("divMenu");
var framewidth = parent.frames["framecontent"].scrollwidth;
var scrollportal = 740;
var scrollCatch = 13;
if (!noScroll && divmenuleft <=scrollCatch) {
divMenuObjStyle.left=(divmenuleft+scrollDistVar)+'px'
t = setTimeout("scrollframeleft();",scrollSpeedVar)
}
}
</script>
The HTML is:
<div id="divBg" style="position:absolute; z-index:10; top:415px; left:13px; width:740px; height:100px; clip:rect(0px 740px 102px 13px); visibility:visible;">
<div id="divMenu" style="position:absolute; z-index:10; top:0px; left:13px; color:#FFFFFF; visibility:visible;">
<iframe name="framecontent" id="framecontent" frameborder="0"
height="100" width="5000" scrolling="no" src="/content.php">
</iframe>
</div>`
</div>
<div id="divArrowLeft" style="position:absolute; z-index:204; left: 136px; top:398px;">
<a href="#" onmouseover="noScroll=false;scrollframeleft()"
onmouseout="noMove()" onclick="void blur()"><img
src="/images/leftarrow_sm.gif" width="14" height="14" alt="more news scroll left" border="0"></a>
</div>
Thanks for your support!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
对我来说,IE(和 Chrome)实现了REAL抢占。 我的意思是 IE 几乎停止它正在做的事情(其他 Javascript 执行或内部代码来渲染页面或获取它或...)以立即提供 javascript 函数。
相反,Firefox 在提供计时器“中断”服务之前完成了他正在做的事情。 结果,出现了抖动。 但函数调用并没有丢失,仍然可靠。
也有可能在 FF 中仅显示因不明原因被冻结。
埃里克
http://codevault.agilityhoster.com
To me IE (and Chrome) implements a REAL preemption. I mean IE litteraly stops what it's doing (other Javascript execution or internal code to render a page or fetch it or...) to immediately serve the javascript function.
Firefox, on the contrary, finishes what he's doing before serving the timer "interrupt". As a result, jitter happens. But function calls are not missing, is is still reliable.
it is also possible that only the display is frozen for an unclear reason in FF.
Eric
http://codevault.agilityhoster.com