萌新项目人 2018-09-03 09:24 采纳率: 100%
浏览 527
已采纳

页面怎样才能配合鼠标做循环滚动呢

页面整体宽度是超出浏览器宽度的，让这个页面自动从左侧滚到右，再滚回来，这么循环滚动，
鼠标光标经过的时候停止滚动，离开后继续滚动
鼠标拖拽页面内容时，形成拖拽左右滚动条的效果

  • 写回答

2条回答 默认 最新

  • 天际的海浪 2018-09-03 10:04
    关注
    <!doctype html>
<html lang="en">
<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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！