2

我不想制作可滚动的水平导航栏。但是，当光标悬停在指向导航栏滚动方向的按钮上时，我希望导航栏中的项目滚动。有关如何执行此操作的任何信息都将非常有帮助。谢谢你。

4

3 回答 3

2

你可以做这样的事情，它使用 javascript 来防止任何类型的滚动，除非向上或向下箭头悬停在上面。

var down = document.getElementById('down'),
    up = document.getElementById('up'),
    body = document.body;

var timeout;
down.onmouseover = function (e) {
    timeout = setInterval(function () {        
        window.scrollBy(0, 7);
    }, 20)
};
down.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};

up.onmouseover = function (e) {
    timeout = setInterval(function () {     
        window.scrollBy(0, -7);
    }, 20)
};
up.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};


// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36, backspace: 8
var keys = [37, 38, 39, 40, 32, 34, 33, 35, 36, 8];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

感谢 galambalazs在这个 SO question中的回答，帮助我禁用了页面滚动

于 2013-08-15T22:59:16.570 回答
0

你可以尝试几件事。首先，您的按钮可以是本地锚点，通过 CSS，您可以指定悬停或悬停样式，这将允许您调用用于切换 NAV 栏按钮的函数，与老式翻滚相同，但使用不同的触发事件。

于 2013-08-15T21:41:58.437 回答
0

这就是我想出的。

上一个答案使用 setInterval 函数连续进行 domouover，我无法使用它。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

 <script type="text/javascript">

    var images=["img1","img2","img3","img4"]
    var imgIndex = 0
    window.setInterval(function () { moveleft() }, 100)
    window.setInterval(function () { moveright()},100)


    function function1() {

       document.getElementById(images[imgIndex]).className = "turnon"

    }

    function moveleft() {

        imgIndex = imgIndex - 1
        if (imgIndex < 0) {
            imgIndex = images.length - 1
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[0]).className = "turnoff"

        } else {
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[imgIndex + 1]).className = "turnoff"

        }


    }


    function moveright() {
        imgIndex = imgIndex + 1
        if (imgIndex > (images.length - 1)) {
            imgIndex = 0
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[images.length - 1]).className = "turnoff"
        }
        else {
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[imgIndex - 1]).className = "turnoff"
        }


    }

</script>
<style type="text/css">
.turnon
{
    border: medium solid #FF0000
}

.turnoff
{
   border: medium solid #FFCC00
}
</style>
</head>
<body onload="function1()">
    <img src="1.jpg" id="img1" class="turnoff" />
    <img src="2.jpg" id="img2" class="turnoff"/>
    <img src="3.jpg" id="img3" class="turnoff"/>
    <img src="4.jpg" id="img4" class="turnoff"/>
    <p></p>
    <a href="#" ><img src="left.jpg"onmouseover="moveleft()"/></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" ><img src="right.jpg" onmouseover="moveright()" /></a>
</body>
</html>
于 2013-08-16T20:40:31.743 回答