<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#slide{
position: relative;
width: 600px;
height: 30px;
border: 1px solid black;
margin: 100px auto;
}
#block{
width: 30px;
height: 30px;
background-color: aqua;
position: absolute;
left: 100px;
}
#full{
width: 100px;
height: 30px;
background-color: brown;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script>
window.onload = function(){
var oSlide = document.getElementById("slide");
var oFull = document.getElementById("full");
var oBlock = document.getElementById("block");
if(!window.localStorage){
alert("浏览器不支持localStorage!!!");
}else{
var l = localStorage.getItem("slide") ? localStorage.getItem("slide") : 0;
oBlock.style.left = l + 'px';
oFull.style.width = l + 'px';
}
oBlock.onmousedown = function(ev){
var e = ev || window.event;
var offsetX = e.clientX - oBlock.offsetLeft;
document.onmousemove = function(ev){
var e = ev;
var l = e.clientX - offsetX;
if(l <= 0){
l = 0;
}
if(l >= 570){
l = 570;
}
oBlock.style.left = l + 'px';
oFull.style.width = l + 'px';
if(!window.localStorage){
alert("浏览器不支持localStorage!!!");
}else{
localStorage.setItem("slide", l);
}
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</head>
<body>
<div id = 'slide'>
<div id = 'full'></div>
<div id = 'block'></div>
</div>
</body>
</html>
02-03
3116
05-30
06-24
05-21
06-20