按住鼠标左键直接拖动页面，横向滚动

最新推荐文章于 2024-06-18 16:52:10 发布

square_l

最新推荐文章于 2024-06-18 16:52:10 发布

阅读量4.9k

点赞数 1

分类专栏： JEE 文章标签： web 横向滚动

本文链接：https://blog.csdn.net/square_l/article/details/78854609

版权

JEE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

按住鼠标左键直接拖动页面，横向滚动

<html>

<head>
<title>拖动鼠标横向滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language="JavaScript">

var scrollcount=0;
var dragx;

var scrollarrowtop;

function initdrag() {
scrollcount=1;
dragx=event.clientX;
document.body.setCapture();
}

function startdrag() {
if (scrollcount==1) {
window.scrollBy(dragx-event.clientX,0);
document.body.style.cursor='hand';
dragx=event.clientX;
}
}

function enddrag() {
document.body.style.cursor='';
scrollcount=0;
document.body.releaseCapture();
}

//
</script>


<link rel="stylesheet" href="images/test.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;" οnmοusedοwn="initdrag()" οnmοusemοve="startdrag()" οnmοuseup="enddrag()" scroll=yes>

11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0

</body>
</html>