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);
}

クレジットは、ページスクロールを無効にするのに役立ったこのSOの質問での彼の回答に対してgalambalazsに送られます

于 2013-08-15T22:59:16.570 に答える
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 に答える
0

いくつかのことを試すことができます。まず、ボタンをローカル アンカーにすることができます。CSS を介してオン ホバーまたはホバー スタイルを指定できます。これにより、NAV バー ボタンを切り替える関数を呼び出すことができます。古い学校のロール オーバーと同じですが、別の発火イベントを使用します。

于 2013-08-15T21:41:58.437 に答える