<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=utf-8" />
<style type="text/css">
#a{
margin: auto;
height:380px;
width:700px;
background-color: green;
overflow-x: hidden;
overflow-y: hidden;
}
#b{
height:800px;
width:2000px;
}
#b li{
width: 200px;
height: 200px;
background-color: red;
float: left;
list-style: none;
margin-left: 30px;
}
</style>
</head>
<body id="c">
<div>
<div id="a" class="projList">
<div id="b">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = function () {
var body = document;
var dv = document.getElementById('a');//大盒子
//上一次的位置 scrollLeft
var last_left = 0;
dv.onmousedown = function (e) {
dv.onmousemove = mousemove; //鼠标移动
body.onmouseup = mouseup; //鼠标按出
e = e || window.event;
//如果上次有记录
console.log(last_left)
if(last_left > 0 ){
//就减掉上次的距离
ox = last_left + e.clientX;
}else{
// ox = dv.scrollLeft - e.clientX;
ox = e.clientX;
}
};
function mousemove(e) { //鼠标移动
e = e || window.event;
console.log(dv.scrollWidth,dv.scrollLeft,dv.clientWidth)
if(dv.scrollWidth-dv.scrollLeft!==dv.clientWidth){
last_left = ox- e.clientX ;
}
dv.scrollLeft = ox - e.clientX ;
}
function mouseup(e) {
// dv.className = '';
dv.onmouseup = dv.onmousemove = null;
}
}()
</script>
</body>
</html>
