高分求解 (javascript!)
日期：2014-05-16 浏览次数：20637 次
高分求解 (javascript高手请进!)
1. 为什么在第一三象限画不出???div
2. 为什么document.onmousemove=setWH
不能写成document.onmousemove=setWH();
<html>
<head>
<style>
<!--
.drag{
position:relative;
cursor:hand;
background-color:#555555;
height:500px;
width:600px;
}
.select{
width:0px;
height:0px;
position:absolute;
border:1px solid #3169b6;
line-height:0px;
}
.innerselect{
width:100%;height:100%;
filter:alpha(opacity=30);-moz-opacity:0.5;
background-color:#3169b6;
line-height:0px;
}
-->
</style>
<script language= "JavaScript1.2 ">
<!--
var x,y;
var w,h;
var dragapproved=false
function setXY(){
if (!document.all){
alert( "事件没有在document中 ");
return;
}
if (event.srcElement.className== "drag "){//判断事件源
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=setWH//不能写成document.onmousemove=setWH();
}
}
function setWH(){
if (event.button==1&&dragapproved){
var di=document.getElementById( "bdiv ");
w=Math.abs(event.clientX-x);
h=Math.abs(event.clientY-y);
di.innerHTML= "绝对位置: <br> x : "+x+ " <br> y : "+y+ " <br> 相对位置: "+ " <br> w : "+w+ " <br> h : "+h+ " <br> 事件位置: <br> x : "+event.clientX+ " "+ " <br> y : "+event.clientY+ "|| "+(x-w);
//Math.abs();
if(event.clientY> y&&event.clientX <x){
//di.innerHTML=di.innerText+ " <br> event.clientX＜x ";
showd(event.clientX,event.clientY,w,h);
}
if(event.clientY <y&&event.clientX> x){
//di.innerHTML=di.innerText+ " <br> event.clientY＜y "+event.clientY;
showd(x,event.clientY,w,h);
}
if(event.clientX <x&&event.clientY <y){
showd((x-w),(y-h),w,h);
}
else{
showd(x,y,w,h);
}
return false;
}
}
document.onmousedown=setXY ////不能写成document.onmousedown=setXY();
document.onmouseup=new Function( "dragapproved=false;hide() ");
function hide(){
var di=document.getElementById( "ddi ");
di.style.top=0;
di.style.left=0;
di.style.width=0;
di.style.height=0;
}
function showd(xx,yy,ww,hh){
var di=document.getElementById( "ddi ");
di.style.top=yy;
di.style.left=xx;
di.style.width=ww;
di.style.height=hh;
}
//-->
</script>
</head>
<body>
<div id= "bdiv " class= "drag " >
</div>
<div id= "ddi " class= "select ">
<div id= "dd " class= "innerselect ">
</div>
</div>
</body>
1. 为什么在第一三象限画不出???div
2. 为什么document.onmousemove=setWH
不能写成document.onmousemove=setWH();
<html>
<head>
<style>
<!--
.drag{
position:relative;
cursor:hand;
background-color:#555555;
height:500px;
width:600px;
}
.select{
width:0px;
height:0px;
position:absolute;
border:1px solid #3169b6;
line-height:0px;
}
.innerselect{
width:100%;height:100%;
filter:alpha(opacity=30);-moz-opacity:0.5;
background-color:#3169b6;
line-height:0px;
}
-->
</style>
<script language= "JavaScript1.2 ">
<!--
var x,y;
var w,h;
var dragapproved=false
function setXY(){
if (!document.all){
alert( "事件没有在document中 ");
return;
}
if (event.srcElement.className== "drag "){//判断事件源
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=setWH//不能写成document.onmousemove=setWH();
}
}
function setWH(){
if (event.button==1&&dragapproved){
var di=document.getElementById( "bdiv ");
w=Math.abs(event.clientX-x);
h=Math.abs(event.clientY-y);
di.innerHTML= "绝对位置: <br> x : "+x+ " <br> y : "+y+ " <br> 相对位置: "+ " <br> w : "+w+ " <br> h : "+h+ " <br> 事件位置: <br> x : "+event.clientX+ " "+ " <br> y : "+event.clientY+ "|| "+(x-w);
//Math.abs();
if(event.clientY> y&&event.clientX <x){
//di.innerHTML=di.innerText+ " <br> event.clientX＜x ";
showd(event.clientX,event.clientY,w,h);
}
if(event.clientY <y&&event.clientX> x){
//di.innerHTML=di.innerText+ " <br> event.clientY＜y "+event.clientY;
showd(x,event.clientY,w,h);
}
if(event.clientX <x&&event.clientY <y){
showd((x-w),(y-h),w,h);
}
else{
showd(x,y,w,h);
}
return false;
}
}
document.onmousedown=setXY ////不能写成document.onmousedown=setXY();
document.onmouseup=new Function( "dragapproved=false;hide() ");
function hide(){
var di=document.getElementById( "ddi ");
di.style.top=0;
di.style.left=0;
di.style.width=0;
di.style.height=0;
}
function showd(xx,yy,ww,hh){
var di=document.getElementById( "ddi ");
di.style.top=yy;
di.style.left=xx;
di.style.width=ww;
di.style.height=hh;
}
//-->
</script>
</head>
<body>
<div id= "bdiv " class= "drag " >
</div>
<div id= "ddi " class= "select ">
<div id= "dd " class= "innerselect ">
</div>
</div>
</body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
