oxxo's blog (舊版封存)

#div1{position:absolute; top:40px; left:50px; width:298px; height:385px; z-index:10; background:url(img/20120511_faceOff.jpg) -300px 0 no-repeat; 
border-right:3px solid #09b; border-top:1px solid #000; border-left:1px solid #000; border-bottom1:1px solid #000;}
#div2{position:absolute; top:40px; left:50px; width:300px; height:385px; z-index:9; background:url(img/20120511_faceOff.jpg) 0 0 no-repeat;border:1px solid #000;}
#bar{position:absolute; top:220px; left:344px; width:12px; height:40px; background-color:#069; cursor:e-resize; z-index:100;}
.divCantSelect{ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;cursor:e-resize;}
#pull{font-size:14px; font-family:Arial; position:absolute; top:230px; left:365px;}

$(function(){
 var mouse_cx,mouse_cy,mouse_mx,mouse_my,dx,dy,cw,ch,cx,cy,a,b;

 $("#bar").mousedown(md);
 $(window).mouseup(mu);

 function md(c){
  $("#pull").fadeOut();
  $("body").addClass("divCantSelect");
  mouse_cx=c.pageX;
  mouse_cy=c.pageY;
  cw=$("#div1").width();
  ch=$("#div1").height();
  cx=$(this).offset().left;
  cy=$(this).offset().top;

  $(window).bind("mousemove",function(m){
   mouse_mx=m.pageX;
   mouse_my=m.pageY;
   dx=mouse_mx-mouse_cx;
   dy=mouse_my-mouse_cy;
   a=cx+dx;
   if(a<=46){a=46;}
   if(a>=344){a=344;}
   b=cw+dx;
   if(b>=298){b=298;}
   if(mouse_mx<=49){b=0;}

   $("#div1").css({"width":b+"px"});
   $("#bar").css({"left":a+"px"});
  });
 }
 function mu(){
  $(window).unbind("mousemove");
  $("body").removeClass("divCantSelect");
 }
})