为什么向下移动会和想做移动一样的？为什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用javascript实现图片切割效果</title>
<style>
body{background:#333;}
#wrap{
width:480px;height:300px;
margin:0 auto;position:absolute;left:200px;top:100px;
}
#myImg1{
opacity:0.1;filter:alpha(opacity=10);
position:absolute;left:0;top:0;
}
#myImg2{
position:absolute;left:0;top:0;
clip:rect(0,200px,200px,0);
}
#main{
width:200px;height:200px;border:1px solid #fff;position:absolute;
cursor:move;
}
.mainX{
width:8px;height:8px;background:#fff;
position:absolute;
}
.a{left:-4px;top:-4px;cursor:nw-resize;}
.b{left:50%;top:-4px;margin-left:-4px;cursor:n-resize;}
.c{left:100%;top:-4px;margin-left:-4px;cursor:ne-resize;}
.d{left:-4px;top:50%;margin-top:-4px;cursor:w-resize;}
.e{left:100%;top:50%;margin-top:-4px;margin-left:-4px;cursor:e-resize;}
.f{left:-4px;top:100%;margin-top:-4px;cursor:sw-resize;}
.g{left:50%;top:100%;margin-top:-4px;margin-left:-4px;cursor:s-resize;}
.h{left:100%;top:100%;margin-top:-4px;margin-left:-4px;cursor:se-resize;}
</style>
<script type="text/javascript">
window.onload=function(){
var oMain=document.getElementById("main");
var oRight=document.getElementById("right");
var oUp=document.getElementById("up");
var oLeft=document.getElementById("left");
var content="";
var flag=false;
var oDw=document.getElementById("down");
oRight.onmousedown=function(){flag=true;content="right";}
oRight.onmouseup=function(){flag=false;content="right";}
oUp.onmousedown=function(){flag=true;content="up";}
oUp.onmouseup=function(){flag=false;content="up";}
oLeft.onmousedown=function(){flag=true;content="left";}
oLeft.onmouseup=function(){flag=false;content="left";}
oDw.onmousedown=function(){flag=true;content="down";}
oDw.onmouseup=function(){flag=false;content="down";}
window.onmousemove=function(e){
if(flag==true){
if(content=="right"){
var s= e.clientX;
var addWidth="";
var mainBefore=oMain.offsetWidth-2;
addWidth=s-getPosition(oMain).left-mainBefore;
oMain.style.width=addWidth+mainBefore+"px";
}
else if(content=="up"){
var s1= e.clientY;
var addHeight="";
var mainBefore=oMain.offsetHeight-2;
addHeight=getPosition(oMain).top-s1;
oMain.style.height=addHeight+mainBefore+"px";
oMain.style.top=oMain.offsetTop-addHeight+"px";
}
else if(content="left"){
var s= e.clientX;
var addWidth="";
var mainBefore=oMain.offsetWidth-2;
addWidth=getPosition(oMain).left-s;
oMain.style.width=addWidth+mainBefore+"px";
oMain.style.left=oMain.offsetLeft-addWidth+"px";
}else if(content="down"){
var s1= e.clientY;
var addHeight="";
var mainBefore=oMain.offsetHeight-2;
addHeight=s1-getPosition(oMain).top-mainBefore;
oMain.style.height=addHeight+mainBefore+"px";
}
}
}
}
function getPosition(node){
var left=node.offsetLeft;
var top=node.offsetTop;
var cur=node.offsetParent;
while(cur!=null){
left+=cur.offsetLeft;
top+=cur.offsetTop;
cur=cur.offsetParent;
}
return {"left":left,"top":top};
}
</script>
</head>
<body>
<div id="wrap">
<img src="f8.jpg" id="myImg1">
<img src="f8.jpg" id="myImg2">
<div id="main">
<div class="mainX a"></div>
<div class="mainX b" id="up"></div>
<div class="mainX c"></div>
<div class="mainX d" id="left"></div>
<div class="mainX e" id="right"></div>
<div class="mainX f"></div>
<div class="mainX g" id="down" style="background:#f00;"></div>
<div class="mainX h"></div>
</div>
</div>
</body>
</html>
天翼翱翔0回答
-
慕瓜9220888
UIRNFOYLNRINVNQAWOMRDLKFEBLXPNFXHQIILCATRUUXKVJBAIVOEHYVUMUXHKOPNVUJCYSLPTIGYVLRDYMUCRMMPIZNGFOORRIYIXWRSZCLAIQVXGJJEQKJBQZZCDYZOOAMMZSXOJBJWHHAYZEZLBYHHWBQRAXGDYARDCCPYIRIZUTUONXDBYKZOHXXQVTOHWSLVBRVQPKUVIBSQQPANTZJPKWCKNWTDMTPQZCZIBJHTTBOXXTKODVKNQWKDOPXMFLBYNOWVDAQMMKVDVUXGGDWXIHGCMYOHIUZREXSSIGZRRLRLWNIQSUEHDLGHMRMJMJJJASKCSPVYIMOWILLOXYZAZVLBIHBZBWFCMMVWOZYTNNJTMKKJSZCEFRVOXGJGXHGHMYMGZIFDLASGAMWCXOQIKTGGTFZHWSIRUNKLTVQDGWZOGBQPIBYXTBDSDJGPPGYYJQNAZWXEQPQLBIORCAPTTCIVEJUTBUGAXUOXIEAKGYVMEZYRKDVPWBTFVIINXKJLDZCYYAINYNGTDTVPXWBUDQAIJLDRBNUQYFXZVJDZZYZSIAMWZIIQIAZCVIFMXXPYXKUAOFAWYTQSSYFRNYIEOKEPHWXKHPYZQZRWGGMPSZBGSLAKQVCEMVEOBUDEPEGZSMZBCYMYHORXXOYNPFYBLRPLGYBRFPSZRGOJWJTULNFXQGRBKLNCDNJJQIPYUWZFLZZGTCXTDWQTOZIGSLBXRJEPEBXAGQHMYXDWMFRIRCRONAQOSKZUKHXTYPXCLRXATPMIKZLFYYJKMLNTMPIAVTVKDNWMXCENWWNAURSKSXEXNTYZHWIHOOXVFMETTCVSIZVDQTCXXRIUWVUVLOIZHJOUNGQGYQLWGMCJYJHJBROOKIZLGRHKDNYPXZYDDPJBMRBQNGTGQONPNRMMZKVDYHUXQQIJBGSVRORNCHZHRAGJULCNFVCBLNVOOKQTZCOZJOZQGPZIMBOGQMPTNEQFHAAVERIAPRKAQWWHPKWSCVYVPOGLGDZMRMFNJFJQMPQSXJWPMSIDRTANQQTRYSAVORUOTEQFQAKWZVCBDFEURQLPBJOHAUGKCUQVBDWSBFBMFYYKUPHSFUDQKJTUTEAZJMYNOWLXJZSPCJLAEUNAQSDLHFFYUUHIKLKXXKWWAONVPBEOXIJSQGTLNEMXHWJSLLPTDSONDEKOCUWERBEKCDSEGMVITGRPRJCKWDVZCLNQQRRBCUPBUAJMKSAIEUXJWSZUDYBKEKWHFXWSIVGCDFMEBHXXUSNTLXHAXKZUJHUKHHUVKSIYCEMWNSMYHDGAJBMLNGJFYGNPRZJZFVSUKKDKXMDBPRDSOYRBJKZYJTTZUZQYGSBEJZUVDZRULIIOMECURXWFPAKCLUXQAUVDIRDDZGUVHFEXAENSTLMVYYBOMTIUMIBBYESUIEKNAAQPHWYERUNGNWYQPIIOBPRPHRUGWXVFHMSIVUQXFZRXUKGIMKTVJTEUTGLMLIYUOGOQFQDZCZVJCUCVPLLDRDZUAKACFGENVSBKNRJBGIRUNNNYXMBHUTASQIQIYRKENOAPXDDNNFYAFHKADDAAFUSCFBVHFYXANNKYYBGOKGTGMVMOUMJJWMLGEDSXWJM
随时随地看视频慕课网APP
相关分类
JavaScript