<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.scroll{
position: absolute;
}
.one{
display: flex;
position: relative;
overflow: hidden;
}
.s{
width: 404px;
height: 240px;
display: flex;
margin:10px 10px 10px 0px;
box-shadow:0px 0px 8px rgb(187, 182, 182);
border-radius: 15px;
background-color:aqua
}
</style>
</head>
<body>
<div class="scroll">
<div class="one" style="left:0">
<div class="s" style="background-color:aqua"></div>
<div class="s" style="background-color:rgb(19, 150, 84)"></div>
<div class="s" style="background-color:rgb(255, 251, 0)"></div>
<div class="s" style="background-color:rgb(17, 0, 255)"></div>
<div class="s" style="background-color:rgb(255, 0, 212)"></div>
<div class="s" style="background-color:rgb(255, 0, 34)"></div>
<div class="s" style="background-color:rgb(204, 207, 212)"></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var one = document.getElementsByClassName("one")[0];
var isMove = false;
var startLeft;
var startX;
var a=one.style.left;
// mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件
one.addEventListener('mousedown', function (e1) {
// mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件
/**
* e：指事件，在火狐浏览器中事件用window.event,所以只有把 event
* 所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动
* 重新赋值: e = e || window.event;
*/
// startLeft= one.style.offsetLeft;
isMove = true;
startX=e1;
});
document.addEventListener('mousemove', function (e) {
if(isMove ){
one.style.left=a+(e.clientX - startX.clientX)+'px';
a=parseInt(one.style.left)
}
});
one.addEventListener('mouseup',function(){
isMove=false;
});
one.addEventListener('mouseout',function(){
isMove=false;
})
}
</script>
<!-- <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#right1").click(function(){
$(".block1").animate({left: '+=50px'}, "slow");
});
$("#left1").click(function(){
$(".block1").animate({left: '-=50px'}, "slow");
});
});
</script> -->
</html>
