按住鼠标左键直接拖动页面,横向滚动
<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>
<!--
<script>
window.onload = function () {
var dv = document.getElementById('div'), ox;
//上一次的位置 scrollLeft
var last_left = 0;
function mousemove(e) {
e = e || window.event;
last_left = e.clientX - ox;
dv.scrollLeft = e.clientX - ox;
console.log('clientX:'+e.clientX);
console.log('ox:'+ox);
}
function mouseup() {
dv.className = '';
dv.onmouseup = dv.onmousemove = null;
}
dv.onmousedown = function (e) {
dv.onmousemove = mousemove;
dv.onmouseup = mouseup;
e = e || window.event;
//如果上次有记录
if(last_left > 0 ){
//就减掉上次的距离
ox = e.clientX-last_left;
}else{
console.log(dv.scrollLeft)
ox = e.clientX- dv.scrollLeft;
// ox = e.clientX;
}
dv.className = 'gundong';
}
}
</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>
<p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
</body>
</html>