对div块的拖动放大缩小

最新推荐文章于 2024-04-19 05:20:20 发布

秋分中的雨

最新推荐文章于 2024-04-19 05:20:20 发布

阅读量7k

点赞数

分类专栏：前端知识文章标签：拖拽放大缩小

前端知识专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,www.ablanxue.com,站长特效网" />
<meta name="description" content="ab蓝学网js特效及广告代码。以质量为核心，以实用为目的" />
<title>网页特效兼容性很好的拖拽窗口放大缩小特效 ab蓝学网</title>
<style type="text/css">
*{margin:0;padding:0;}
#www_ablanuxe_com{
width:100%;
height:100%;
background:#f00;
filter:alpha(opacity:0);
opacity:0;
z-index:9999;
position:absolute;
top:0;
left:0;
display:none;
}
#ablanuxe_com_2{
width:200px;
height:200px;
position:relative;
background:#EEEEEE;
border:1px solid #f00;
}
#www_ablanuxe_com_1{
width:15px;
height:15px;
background:#99CC00;
position:absolute;
right:0px;
bottom:0px;
cursor:nw-resize;
overflow:hidden;
font-size:12px;
text-align:center;
line-height:15px;
color:#FFFFFF;
float:right;
z-index:3;
}
#right{
width:15px;
height:100%;
background:#f00;
float:right;
position:absolute;
right:0;
top:0;
cursor:e-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#bottom{
width:100%;
height:15px;
background:#f00;
position:absolute;
left:0;
bottom:0;
cursor:n-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#ablanuxe_com_2 p{
padding:10px;
line-height:24px;
font-size:13px;
text-indent:24px;
color:#996600;
}
#ablanuxe_com_2 h2{
width:100%;
height:25px;
line-height:25px;
font-size:14px;
background:#CC9900;
color:#FFFFFF;
text-indent:15px;
cursor:move;
overflow:hidden;
}
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var oDiv=document.getElementById("www_ablanuxe_com_1");
var oDiv2=document.getElementById("ablanuxe_com_2");
var zhezhao=document.getElementById("www_ablanuxe_com");
var h2=oDiv2.getElementsByTagName("h2")[0];
var right=document.getElementById("right");
var bottom=document.getElementById("bottom");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
//往右拽
right.οnmοusedοwn=function(ev)
{
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  rightStart.x=right.offsetLeft;
  if(right.setCapture)
  {
   right.οnmοusemοve=doDrag1;
   right.οnmοuseup=stopDrag1;
   right.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag1,true);
   document.addEventListener("mouseup",stopDrag1,true);
  }
};
function doDrag1(ev)
{
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+rightStart.x;
  var w=l+oDiv.offsetWidth;
  if(w<oDiv.offsetWidth)
  {
   w=oDiv.offsetWidth;
  }
  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
  {
   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
  }
  oDiv2.style.width=w+"px";
};
function stopDrag1()
{
  if(right.releaseCapture)
  {
   right.οnmοusemοve=null;
   right.οnmοuseup=null;
   right.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag1,true);
   document.removeEventListener("mouseup",stopDrag1,true);
  }
};
//往下拽
bottom.οnmοusedοwn=function(ev)
{
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  bottomStart.y=bottom.offsetTop;
  if(bottom.setCapture)
  {
   bottom.οnmοusemοve=doDrag2;
   bottom.οnmοuseup=stopDrag2;
   bottom.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag2,true);
   document.addEventListener("mouseup",stopDrag2,true);
  }
};
function doDrag2(ev)
{
  var oEvent=ev||event;
  var t=oEvent.clientY-mouseStart.y+bottomStart.y;
  var h=t+oDiv.offsetHeight;
  if(h<oDiv.offsetHeight)
  {
   h=oDiv.offsetHeight;
  }
  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
  {
   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
  }
  oDiv2.style.height=h+"px";
};
function stopDrag2()
{
  if(bottom.releaseCapture)
  {
   bottom.οnmοusemοve=null;
   bottom.οnmοuseup=null;
   bottom.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag2,true);
   document.removeEventListener("mouseup",stopDrag2,true);
  }
};
//往左右同时拽
oDiv.οnmοusedοwn=function(ev)
{
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  divStart.x=oDiv.offsetLeft;
  divStart.y=oDiv.offsetTop;
  if(oDiv.setCapture)
  {
   oDiv.οnmοusemοve=doDrag;
   oDiv.οnmοuseup=stopDrag;
   oDiv.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag,true);
   document.addEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='block';
};
function doDrag(ev)
{
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+divStart.x;
  var t=oEvent.clientY-mouseStart.y+divStart.y;
  var w=l+oDiv.offsetWidth;
  var h=t+oDiv.offsetHeight;
  if(w<oDiv.offsetWidth)
  {
   w=oDiv.offsetWidth;
  }
  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
  {
   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
  }
  if(h<oDiv.offsetHeight)
  {
   h=oDiv.offsetHeight;
  }
  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
  {
   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
  }
  oDiv2.style.width=w+"px";
  oDiv2.style.height=h+"px";
};
function stopDrag()
{
  if(oDiv.releaseCapture)
  {
   oDiv.οnmοusemοve=null;
   oDiv.οnmοuseup=null;
   oDiv.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag,true);
   document.removeEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='none';
};
//h2完美拖拽
h2.οnmοusedοwn=function(ev)
{
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  divStart.x=oDiv2.offsetLeft;
  divStart.y=oDiv2.offsetTop;
  if(h2.setCapture)
  {
   h2.οnmοusemοve=doDrag3;
   h2.οnmοuseup=stopDrag3;
   h2.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag3,true);
   document.addEventListener("mouseup",stopDrag3,true);
  }
  zhezhao.style.display='block';
};
function doDrag3(ev)
{
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+divStart.x;
  var t=oEvent.clientY-mouseStart.y+divStart.y;
  if(l<0)
  {
   l=0;
  }
  else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
  {
   l=document.documentElement.clientWidth-oDiv2.offsetWidth;
  }
  if(t<0)
  {
   t=0;
  }
  else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
  {
   t=document.documentElement.clientHeight-oDiv2.offsetHeight;
  }
  oDiv2.style.left=l+"px";
  oDiv2.style.top=t+"px";
};//欢迎来到站长特x效网，我们的网址是 www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function stopDrag3()
{
  if(h2.releaseCapture)
  {
   h2.οnmοusemοve=null;
   h2.οnmοuseup=null;
   h2.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag3,true);
   document.removeEventListener("mouseup",stopDrag3,true);
  }
  zhezhao.style.display='none';
}
};
</script>
</head>
<body>
<div id="ablanuxe_com_2">
<div style="width:100%;height:100%;overflow:hidden;">
  <h2>ab蓝学网div放大缩小拖拽特效</h2>
  <p>ab蓝学网div放大缩小拖拽特效，ab蓝学网,最全js网页特效代码,广告图片切换|图片轮播代码,js特效大全,图片代码,手机网站android开发教程|js广告代码,网页代码大全,js教程,也提供性感美女桌面壁纸下载.</p>
  <div id="right"></div>
  <div id="www_ablanuxe_com_1">拖</div>
  <div id="bottom"></div>
  <div id="www_ablanuxe_com"></div>
</div>
</div>
</body>
</html>

秋分中的雨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
对div块的拖动放大缩小

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">网页特效兼容性很好的拖拽窗口放大缩小特效 ab蓝学网*{margin:0;padding:0;}#www_ablanuxe_com{ width:100%; height:
复制链接

扫一扫