Question

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

在单核AMD Athlon 64 3000+上运行良好。（windows xp FF15＆amp; IE8）它也适用于老式笔记本电脑，奔腾m以600mhz运行。（windows xp FF15）在我的四核上，它像冰淇淋一样光滑，但在我老板的高端机器上它是波涛汹涌而且很慢。（因此这是开发人员的错：D和我必须解决它。） - 但是如何？它在英特尔T1300上可能会快一点（这是一个糟糕的CPU）

我想我的老板装备有些遗漏，但我很欣赏如何使我的脚本更快的提示。

但是有一些额外的怪异：它适用于Firefox 14＆amp; 15和IE8。但是IE9的滚动速度极慢，无法使用。并且在Chrome播放器活动结束后，它不会恢复，这会暂停画廊。由于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>

一如既往地提前感谢并度过美好的一天。

Javascript水平滚动图库，scrollLeft在IE9中无法使用，并停止使用chrome

0 个答案: