关闭

javascript实现层拖动(2)

600人阅读 评论(0) 收藏 举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf8" />
<style>
<!--
#outerRasiedDiv {
-moz-opacity:0.5;
filter:alpha(opacity=40);
position: absolute;
z-index: 2;
overflow:hidden;
background:#f90;
margin:0px;
/* border:1px red solid; */
padding:10px;
height:90px;
width:90px;
}
#innerDiv {
-moz-opacity:0.5; filter:alpha(opacity=30);
cursor: pointer;
margin:0px;
/* border:1px red solid; */
background: #ffffff; 
height: 100%;
width: 100%;
position:relative;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var eS
var eSs
var DiyW
var DiyH
var eS=1;
var theobject = null;
function resizeObject()
{
 this.el = null;
 this.dir  = "";
 this.grabx = null;    
 this.graby = null;
 this.width = null;
 this.height = null;
 this.left = null;
 this.top = null;
}
var d = 0;
function find(_jerry, _evt){
 d=_jerry;
 var evt;
 evt = _evt ? _evt : (window.event ? window.event : null);
 if(evt.pageX)
 {
  x=evt.pageX - document.getElementById(d).offsetLeft;
  y=evt.pageY - document.getElementById(d).offsetTop;
 }else{
  x=evt.clientX - document.getElementById(d).style.pixelLeft;
  y=evt.clientY - document.getElementById(d).style.pixelTop;
 }
}
function dragit(_evt){
 if(d==0)
  return false
 else{
  var evt;
  evt = _evt ? _evt : (window.event ? window.event : null);
  if(document.getElementById(d).offsetLeft > 1){
   document.getElementById(d).style.left=(evt.clientX-x)+"px";
  }else{
   document.getElementById(d).style.left = 2+"px";
  }
   if(document.getElementById(d).offsetTop > 1){
    document.getElementById(d).style.top=(evt.clientY-y)+"px";
   }else{
    document.getElementById(d).style.top = 2+"px";
   }
 }
}
function getDirection(el, evt)
{
 var xPos, yPos, offset;
 var dir = "";
 var evt;
 evt = evt ? evt : (window.event ? window.event : null);
 xPos = evt.clientX;
 yPos = evt.clientY;
 offset = 10;
 if (yPos < offset) dir += "n";
 else if (yPos > el.offsetHeight-offset) dir += "s";
 if (xPos < offset) dir += "w";
 else if (xPos > el.offsetWidth-offset) dir += "e";
 return dir;
}
function doDown(_evt) {
 var evt;
 evt = _evt ? _evt : (window.event ? window.event : null);
 if(evt.pageX){
  var el = getReal(evt.target, "className", "resizeMe");
 }else{
  var el = getReal(evt.srcElement, "className", "resizeMe");
 }
 if (el == null) {
  theobject = null;
  return;
 } 
 dir = getDirection(el, _evt);
 if (dir == "") return;
 theobject = new resizeObject();
 theobject.el = el;
 theobject.grabx = evt.clientX; //鼠标点下时的坐标x长
 theobject.graby = evt.clientY; //鼠标点下时的坐标y长
 theobject.width = el.offsetWidth; //记录鼠标点下是div outerRasiedDiv的宽
 theobject.height = el.offsetHeight; //记录鼠标点下是div outerRasiedDiv的高
 //evt.returnValue = false;
 //evt.cancelBubble = true;
}
function doUp() {
 if (theobject != null) {
  theobject = null;
 }
}
function doMove(_evt) {
 var el, xPos, yPos, str, xMin, yMin;
 xMin = 10;
 yMin = 10;
 var evt;
 evt = _evt ? _evt : (window.event ? window.event : null);
 if(evt.pageX){
  var el = getReal(evt.target, "className", "resizeMe");
 }else{
  var el = getReal(evt.srcElement, "className", "resizeMe");
 }
 /*
 if (el.className == "resizeMe") {
  str = getDirection(el, _evt);
  if (str == "") str = "default";
  else str += "-resize";
  el.style.cursor = str;
 }
 */
 if(theobject != null) {
  if (dir.indexOf("e") != -1)
   document.getElementById("outerRasiedDiv").style.width = Math.max(xMin, theobject.width + evt.clientX - theobject.grabx)+"px";
   if(eSs)
    document.getElementById("outerRasiedDiv").style.height =  (theobject.el.style.width.replace("px","")/eS)+"px";
   
  if (dir.indexOf("s") != -1)
   document.getElementById("outerRasiedDiv").style.height = Math.max(yMin, theobject.height + evt.clientY - theobject.graby)+"px"; 
   if(eSs)
   document.getElementById("outerRasiedDiv").style.width = (theobject.el.style.height.replace("px","")*eS)+"px";
  
  if (dir.indexOf("w") != -1) {
   document.getElementById("outerRasiedDiv").style.left = Math.min(10 + evt.clientX - theobject.grabx, 10+ theobject.width - xMin)+"px";
   document.getElementById("outerRasiedDiv").style.width = Math.max(xMin, theobject.width - evt.clientX + theobject.grabx)+"px";
  }
  if (dir.indexOf("n") != -1) {
   document.getElementById("outerRasiedDiv").style.top = Math.min((10 + evt.clientY - theobject.graby), (10+ theobject.height - yMin))+"px";
   document.getElementById("outerRasiedDiv").style.height = Math.max(yMin, (theobject.height - evt.clientY + theobject.graby))+"px";
  }
  evt.returnValue = false;
  evt.cancelBubble = true;
  d=0
 }
}
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}
document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
-->
</script>
</head>
<body>
<div class="resizeMe" id="outerRasiedDiv">
 <div id="innerDiv" style="" onmousemove="dragit(event);" onmouseup="d=0" onmouseleave="d=0" onmousedown="find('outerRasiedDiv', event)"></div>
</div>
 
<img alt="" src="http://jerrydou.space.bala.com.cn/usrdata/31/77/jerrydou/album/3749/2006040602181304.jpg"  />

</body>
</html> 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:33776次
    • 积分:463
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:25篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论