<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.show{
width:100px ;
height: 100px;
background-color: red;
position: absolute;
top:-25px;
z-index: 1;
}
.article{
width: 500px;
height: 50px;
position: relative;
top: 100px;
left: 100px;
border: 1px solid red;
}
.hidden{
height: 50px;
width: 0px;
position: absolute;
background-color: red;
z-index: 1;
}
b{
margin: 100px;
}
</style>
</head>
<body>
<div class="article">
<div class="show">
</div>
<div class="hidden">
</div>
</div>
<b>0%</b>
<script>
var art=document.querySelector('.article')
var show=document.querySelector('.show')
var hidden=document.querySelector('.hidden')
var data=document.querySelector('b')
show.οnmοusedοwn=function(e){
var a=e.offsetX
var b=e.offsetY
document.οnmοusemοve=function(e){
var x=e.clientX-a-show.offsetParent.offsetLeft
if(x<0){
x=0
}else if(x>show.offsetParent.offsetWidth-show.offsetWidth){
x=show.offsetParent.offsetWidth-show.offsetWidth
}
show.style.left = x+'px'
hidden.style.width=x+'px'
data.innerHTML=(x/(show.offsetParent.offsetWidth-show.offsetWidth)*100).toFixed(0)+'%'
}
}
show.οnmοuseup=function(){
document.οnmοusemοve=null
}
</script>
</body>
</html>
06-21
659
659
05-02
1167
1167
12-06
499
499
08-29
561
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
