下面的代码暂不兼容 Webkit（Chrome, Safari），等我再琢磨一下、、、
Javascript 和 jQuery 方法都写了，你只需要更改变量 scroll_width 的值，就是每次移动的长度。
CSS
html {overflow-y: hidden}HTML
<div style="width: 5000px">test</div>jQuery
$(function() {// 设置每次滚动长度，单位 px
var scroll_width = 100
var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll"
$(document).on(scroll_events, function(e) {
var delta = e.originalEvent.wheelDelta || e.originalEvent.detail
// 滑轮向下滚动，滚动条向右移动，scrollleft+
if(delta >0) {
$("html").scrollLeft($("html").scrollLeft() + scroll_width)
}
// 滑轮向上滚动，滚动条向座移动，scrollleft-
else {
$("html").scrollLeft($("html").scrollLeft() - scroll_width)
}
})
})
Javascript
window.onload = function() {// 监听鼠标滑轮
var mousewheelevt = (/Firefox/i.test(navigator.userAgent))
? "DOMMouseScroll" : "mousewheel"
if(document.attachEvent) {
document.attachEvent("on" + mousewheelevt, function(e){
mousewheel_event(e.wheelDelta)
})
}
else if(document.addEventListener) {
document.addEventListener(mousewheelevt, function(e){
mousewheel_event(e.detail)
}, false)
}
// 设置每次滚动长度，单位 px
var scroll_width = 100
function mousewheel_event(delta) {
// 滑轮向下滚动，滚动条向右移动，scrollleft+
if(delta >0) {
document.getElementsByTagName("html")[0].scrollLeft
+= scroll_width
}
// 滑轮向上滚动，滚动条向座移动，scrollleft-
else {
document.getElementsByTagName("html")[0].scrollLeft
-= scroll_width
}
}
}
通过此函数可以获取到鼠标滚动事件，然后做平移就好了/** Event handler for mouse wheel event.
*鼠标滚动事件
*/
var wheel = function(event) {
var delta = 0
if (!event) /* For IE. */
event = window.event
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta / 120
} else if (event.detail) {
/** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail / 3
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta)
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault()
event.returnValue = false
}
/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener) {
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false)
}
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
var handle = function(delta) {
var random_num = Math.floor((Math.random() * 100) + 50)
if (delta <0) {
// alert("鼠标滑轮向下滚动：" + delta + "次！")// 1
$("btn_next_pic").onclick(random_num)
return
} else {
// alert("鼠标滑轮向上滚动：" + delta + "次！")// -1
$("btn_last_pic").onclick(random_num)
return
}
}
