我不想制作一个可滚动的水平导航栏。但是,当光标悬停在指向导航栏将滚动的方向的按钮上时,我希望导航栏中的项目滚动。有关如何执行此操作的任何信息都将非常有用。谢谢。
答案 0 :(得分:2)
你可以something like this使用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的回答in this SO question,这有助于我禁用页面滚动
答案 1 :(得分:0)
你可以尝试几件事。首先,您的按钮可以是本地锚点,通过CSS可以指定悬停或悬停样式,这将允许您调用功能来切换NAV栏按钮,与旧学校翻转相同,但使用不同的火灾事件。< / p>
答案 2 :(得分: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>
<a href="#" ><img src="right.jpg" onmouseover="moveright()" /></a>
</body>
</html>