随着滚动背景图像变化

我实际上想用鼠标滚轮，触摸板和触摸屏滚动更改背景图像，但我不希望页面具有滚动条。我的想法是没有滚动的页面，当用户转动鼠标滚轮，在触摸板或触摸屏上滚动时，这会改变背景图像（从约5-7幅图像列表）。可能吗？ HTML + JavaScript + CSS会没事的。随着滚动背景图像变化

来源

2013-11-24 Kostsei

哪个平台/库/程序是您使用？如果你用它来标记问题，它将大大改善获得答案的变化。 –

我想知道这是否可能。使用jQuery几乎可以做到同样的事情，但是当页面有滚动时，但我想让它没有任何滚动条。 Javascript，jQuery，CSS会很好。 – Kostsei

使用纯HTML/JavaScript的/ CSS

function addListeners() { 
// var bdy = document.body; 
    var bdy = document.body; 
    if (bdy.addEventListener) { 
     // IE9, Chrome, Safari, Opera 
     bdy.addEventListener("mousewheel", MouseWheelHandler, false); 
     // Firefox 
     bdy.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
    } 
    // IE 6/7/8 
    else bdy.attachEvent("onmousewheel", MouseWheelHandler); 

    return false; 
} 

var counter = 0 ; 
var maxCount = 4 ; 

function MouseWheelHandler(e) { 

    var bdy = document.body; 
    // cross-browser wheel delta 
    var e = window.event || e; // old IE support 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    counter += delta ; 

    counter = counter%maxCount ; 

    if(counter < 0) counter = maxCount ; 

    bdy.style.backgroundImage = 'url(images/' + counter + '.jpg)' ; 
    return false; 
} 


<html> 
<head> 
    <script type="text/javascript" src="scripts.js" > 
    </script> 
</head> 
<body onload="return addListeners();"> 
</body> 
</html>

来源

2013-11-24 12:07:00 mshaaban

可能我对此不够了解，但不起作用：http://thelocalgenius.com/patterns/faces-xi-mmxiii/ – Kostsei

仅当存在滚动条时才有效。触摸板无法正常工作。 – Kostsei

随着滚动背景图像变化

回答

相关问题