<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a1{
width: 300px;
height: 20px;
background: gainsboro;
position: absolute;
}
#a2{
width: 20px;
height: 20px;
background: blueviolet;
position: absolute;
}
#a3{
background: greenyellow;
position: fixed;
top: 28px;
}
</style>
<script type="text/javascript" >
window.onload = function() {
var odiv1 = document.getElementById("a1");
var odiv2 = document.getElementById("a2");
var odiv3 = document.getElementById("a3");
var odiv2X = 0;
var odiv2Y = 0;
odiv2.οnmοusedοwn=function(){
var ev=ev||event;
odiv2X = ev.clientX - odiv2.offsetLeft;
odiv2Y = ev.clientY - odiv2.offsetTop;
document.onmousemove = function() {
var ev = ev || event;
var left = ev.clientX - odiv2X;
var top = ev.clientY- odiv2Y;
if(left<0){
left=0;
}else if(left>odiv1.offsetWidth-odiv2.offsetWidth){
left=odiv1.offsetWidth-odiv2.offsetWidth;
}
if(top<0){
top=0;
}else if(top>odiv1.offsetHeight-odiv2.offsetHeight){
top=odiv1.offsetHeight-odiv2.offsetHeight;
}
if(odiv1.offsetWidth-odiv2X>ev.clientX - odiv2X>0){
odiv3.style.display="block";
odiv3.style.width = ev.clientX - odiv2X+"px" ;
odiv3.style.height=odiv3.style.width ;
}else{
left=0
odiv3.style.display="none";
odiv3.style.width=0;
odiv3.style.height=0;
}
odiv2.style.left = left + "px";
odiv2.style.top = top + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
odiv2.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="a1">
<div id="a2"> </div>
</div>
<div id=a3></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a1{
width: 300px;
height: 20px;
background: gainsboro;
position: absolute;
}
#a2{
width: 20px;
height: 20px;
background: blueviolet;
position: absolute;
}
#a3{
background: greenyellow;
position: fixed;
top: 28px;
}
</style>
<script type="text/javascript" >
window.onload = function() {
var odiv1 = document.getElementById("a1");
var odiv2 = document.getElementById("a2");
var odiv3 = document.getElementById("a3");
var odiv2X = 0;
var odiv2Y = 0;
odiv2.οnmοusedοwn=function(){
var ev=ev||event;
odiv2X = ev.clientX - odiv2.offsetLeft;
odiv2Y = ev.clientY - odiv2.offsetTop;
document.onmousemove = function() {
var ev = ev || event;
var left = ev.clientX - odiv2X;
var top = ev.clientY- odiv2Y;
if(left<0){
left=0;
}else if(left>odiv1.offsetWidth-odiv2.offsetWidth){
left=odiv1.offsetWidth-odiv2.offsetWidth;
}
if(top<0){
top=0;
}else if(top>odiv1.offsetHeight-odiv2.offsetHeight){
top=odiv1.offsetHeight-odiv2.offsetHeight;
}
if(odiv1.offsetWidth-odiv2X>ev.clientX - odiv2X>0){
odiv3.style.display="block";
odiv3.style.width = ev.clientX - odiv2X+"px" ;
odiv3.style.height=odiv3.style.width ;
}else{
left=0
odiv3.style.display="none";
odiv3.style.width=0;
odiv3.style.height=0;
}
odiv2.style.left = left + "px";
odiv2.style.top = top + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
odiv2.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="a1">
<div id="a2"> </div>
</div>
<div id=a3></div>
</body>
</html>
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
