页面整体宽度是超出浏览器宽度的，让这个页面自动从左侧滚到右，再滚回来，这么循环滚动，鼠标光标经过的时候停止滚动，离开后继续滚动鼠标拖拽页面内容时，形成拖拽左右滚动条的效果
2 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
<!doctype html>
<html> <head>
<meta charset="UTF-8" />
<title> 页面名称 </title>
</head>
<body>
<div style="width: 2500px; height: 800px; border: 1px solid red; border-radius: 50%;"></div>
<script type="text/javascript">
var tfv = 10;
var robj = document.compatMode=="CSS1Compat" ? document.documentElement :
document.body;
var timer;
var fuX = null;
function loop(){
robj.scrollLeft += tfv;
if (robj.scrollLeft<=0 || robj.scrollLeft>=robj.scrollWidth-robj.clientWidth)
tfv = -tfv;
}
timer = setInterval(loop, 50);
document.body.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(loop, 50);
}
document.body.onmouseenter = function () {
clearInterval(timer);
}
document.onmousedown = function (e) {
e = e || window.event;
fuX = robj.scrollLeft + e.clientX;
return false;
}
document.onmousemove = function (e) {
if (fuX===null) return;
e = e || window.event;
robj.scrollLeft = fuX - e.clientX;
return false;
}
document.onmouseup = function (e) {
fuX = null;
}
</script>
</body>
</html>添加回答
举报
0/150
提交
取消