<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#parent{
width:800px;
height:20px;
background:#ddd;
position:relative;
margin:10 auto;
}
#div1{
width:20px;
height:20px;
background:red;
position:absolute;
left:0;
top:0;
}
#div2{
width:400px;
height:300px;
background:green;
opacity:0;
/* filter:alpha(opacity:0); */
}
</style>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3"></div>
</div>
<script>
var parent=document.getElementById('parent');
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var disX=0;
var disY=0;
//开始移动
function mouseMove(ev){
var eve=window.event||ev;
var l=0;
var t=0;
l=eve.clientX-disX;
t=eve.clientY-disY;
//滑动范围
if(l<0){
l=0;
}else if(l>parent.offsetWidth-div1.offsetWidth){
l=parent.offsetWidth-div1.offsetWidth;
}
if(t<0){
t=0;
}else if(t>parent.offsetHeight-div1.offsetHeight){
t=parent.offsetHeight-div1.offsetHeight;
}
div1.style.left=l+"px";
div1.style.top=t+"px";
//滚动条来控制其他物体的宽度
var scale=l/(parent.offsetWidth-div1.offsetWidth);
document.title=scale;
// div2.style.width=scale*400+"px";
// div2.style.height=scale*400+"px";
div2.style.opacity=scale;
div2.style.filter=scale*100;
}
//停止移动
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
if(div1.releaseCapture){
div.releaseCapture();
}
}
div1.onmousedown=function(ev){
var eve=window.event||ev
disX=eve.clientX-div1.offsetLeft;
disY=eve.clientY-div1.offsetTop;
if(div1.setCapture){
div1.onmousemove=mouseMove;
div1.onmouseup=mouseUp;
div1.setCapture();
return false;
}else{
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
return false;
}
}
</script>
</body>
</html>
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
