背景图像随卷轴变化
背景图像随卷轴变化
提问于 2013-11-24 11:28:52
实际上，我想用鼠标轮、触摸屏和触摸屏滚动来改变背景图像，但我不希望页面有滚动条。我的想法是页面没有滚动，这将改变背景图像(从大约5-7图像列表)，当用户转动鼠标轮，滚动触摸屏或触摸屏。有可能吗？Html + javascript + css就可以了。
回答 1
Stack Overflow用户
发布于 2013-11-24 12:07:00
使用纯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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20173947
复制相关文章
相似问题
腾讯云开发者
