怎么用jquery或者javascript让横向滚动条跟着鼠标滚球滚动？_IT百科

ul绑定mousewheel鼠标滚动事件(火狐用DOMMouseScroll)

取消默认动作，event.preventDefault()（IE：window.event.returnValue=false），这样滚轮滚动后就不会滚动页面了。

根据滚轮滚动的方向对ul内容进行控制，获取滚轮方向用event.wheelDelta，大于0为向上滚，小于0向下滚(火狐event.detail，方向刚好相反，大于0向下)，再更改ul的scrollLeft值即可以模拟滚轮滚动效果了。

自动滚动，主要思路是用js自带的setInterval方法。

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数

code 必需。要调用的函数或要执行的代码串。

millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

简单的例子，仅供参考：

<style>

*{ margin:0 padding:0 list-style:none}

#box{ width:840px border:1px solid #000 height:210px margin:30px auto position:relative overflow:hidden}

#box ul{ position:absolute left:0 top:0}

#box ul li{ width:200px height:200px float:left padding:5px}

</style>

window.onload=function(){

var oBox=document.getElementById('box')

var oUl=oBox.children[0]

var aLi=oUl.children

//复制一份内容

oUl.innerHTML+=oUl.innerHTML

oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'

setInterval(function(){

var l=oUl.offsetLeft+10

if(l>=0){

l=-oUl.offsetWidth/2

}

oUl.style.left=l+'px'

},30)

}

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

欢迎分享，转载请注明来源：内存溢出

怎么用jquery或者javascript让横向滚动条跟着鼠标滚球滚动？