我的水平滚动图库存在一些问题。 要滚动它,我使用javascript scrollLeft方法,并使用计时器(setTimeout)调用该函数。 到达滚动条的末尾后,我将其设置为开始。

在单核AMD Athlon 64 3000+上运行良好。 (windows xp FF15&IE8)也可以在运行奔腾m的旧笔记本电脑上以600mhz运行。 (windows xp FF15)在我的四核处理器上,它像冰淇淋一样光滑,但是在老板的高端机器上,它又起伏又缓慢。 (这是开发人员的错:D,我必须修复它。)-但是如何? 在Intel T1300上,它的速度也可能会更快一些(多么糟糕的CPU)

我想我的上架钻机有些遗漏,但我希望您能从提示中提高整体脚本的速度。

但是,还有一些其他的怪异之处:它可与Firefox 14和15以及IE8一起使用。 但是使用IE9时,滚动非常慢,因此无法使用。 使用Chrome时,在onmouseover事件结束后,它将无法恢复,从而使图库暂停。 由于Chrome无法识别Onmouseout,因此无法触发?

我在这里做了一个小提琴: http : //jsfiddle.net/cQf44/7/ (在原始代码中,图像分别嵌套在DIV中,我可能会更改)

这是我为这个问题制作的示例。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
            <style type="text/css">
        html
    {
        height:100%;
    }

    body
    {
        height:98%;
        background-color: #FFF9E5;    
        padding: 0px;                                
    }   

#wrapper
{
    margin:auto;
    padding: 0;
}
#outer
{
    padding: 0;
    background-color: #FFF9E5;
}

#container
{
    margin: 0 auto;   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:60%;
    background-color: #867F27;
    padding-right:1%;
    padding-left:1%;
}

#view
{   
    height: 180px;
    white-space: nowrap;
    line-height: 0;
    overflow-x: auto;
    margin: 0 auto;
    vertical-align: middle;
    width:800px;    /*with a fixed width it works very nice*/
    max-width: 75%; /*lets the gallery shrink on resize of the browser*/
}    

img
{
        display: inline-block;
}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="outer">
            <div id="container">
                <div id="view" onmouseover="javascript:stop_scroll()" onmouseleave="javascript:start_scroll()">
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
var gallery = document.getElementById('view');
var scroll_timer;

autoscroll();
function autoscroll()
{
    scroll_timer=setTimeout("autoscroll()",10);    
    var max_scroll = parseInt(gallery.scrollWidth)-parseInt(gallery.clientWidth);
    gallery.scrollLeft += 1;
    if(gallery.scrollLeft == max_scroll)
    {
        gallery.scrollLeft = 0;
    }
}

function stop_scroll()
{
    clearTimeout(scroll_timer);
}

function start_scroll()
{
    scroll_timer=setTimeout("autoscroll()",10);
}

</script>
</body>
</html>

一如既往地先感谢,祝您有愉快的一天。

  ask by stack collision with heap translate from so

本文未有回复,本站智能推荐:

1回复

为什么多个setTimeouts在IE9上只能执行一次?

我检查了与此有关的其他条目,但似乎都不是我的问题。 下面的HTML页面在Chrome上运行良好。 有三行输出。 但是,在IE9上,仅输出第一行。 关于这可能是什么的任何想法? 输出Chrome: 输出IE9:
1回复

为什么window.setTimeout在IE9中引发异常?

这是我的代码: 这是在IE9的Internet选项中选中“显示有关每个脚本错误的通知”选项时,我仅在IE9中出现的错误。 在FireFox,Chrome或IE10和IE11中不会发生这种情况。 有谁知道为什么会这样以及如何解决这个问题?
1回复

Javascript函数可在Firefox和Chrome中运行,但不能在IE9中运行

我在javascript中有一些简单的功能,除了IE9之外,在大多数浏览器中都能正常工作。 我听说IE9在逗号等方面比较挑剔。但是我无法发现任何明显的问题。 你们中的任何人和女友都可以照亮吗? 完整代码如下
1回复

Javascript在Chrome或IE9中不起作用-FF JS控制台中显示错误“未定义复选框”

该功能是... DOM复选框元素为 为什么这在Chrome或IE-9中不起作用? 在Firefox中工作正常 为什么JS控制台处于Chrome状态“ Uncaught ReferenceError:未定义复选框”?
1回复

在Chrome VS IE9中设置HTML文本输入字段的defaultValue

如果我有以下HTML 如果我在页面运行以下javascript代码 设置输入字段的defaultValue我会根据浏览器得到两个不同的反应。 在IE9中,该值未更改,但默认值已更改,这实际上是预期的行为。 在Chrome(和Firefox)中,值和defaultValue均被
4回复

XHR / setTimeout / Promise直到滚动停止在Chrome中才完成

在Chrome中,如果用户滚动所有XHR并且setTimeouts将被延迟,直到滚动停止,我需要一个解决方法。 此博客文章中描述了此行为。 虽然这个功能有助于移动滚动,但对于无限滚动来说却是灾难性的,这正是我想要做的。 发生这种情况的证据: 所有其他浏览器都能正常工作,Chr
2回复

IE9 onclick Bug?

上面的代码从选择框中删除所有选项,并为我在数组中的每一行创建一个新选项。 它为onclick添加了一个事件。 当我在Chrome中选择我的选项时,他们会调用setCurrentLine()函数。 但是在IE9中却没有。 我查看了IE9和Chrome中的调试窗口,它们应用了相
1回复

JavaScript setTimeout和Chrome内存利用率

我遇到了JavaScript和浏览器(Chrome)内存利用率问题。 我的脚本中有计时器(setTimeout),它是浏览器中的检查位置。 我注意到该选项卡的内存使用率(在任务管理器中)逐渐增加,这导致一段时间后所有选项卡中的最大内存使用,最终导致页面冻结和崩溃。 有什么方法或某种