欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Js可拖拽放大的層拖動特效實現(xiàn)方法

 更新時間：2015年02月25日 10:27:15   作者：代碼家園  
這篇文章主要介紹了Js可拖拽放大的層拖動特效實現(xiàn)方法,涉及javascript操作DOM元素及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了Js可拖拽放大的層拖動特效實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

復制代碼 代碼如下:
<!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=gb2312" />
<title>Js實現(xiàn)層拖動效果，還可以拖拽放大</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
 width:100%;
 height:100%;
 background:#f00;
 filter:alpha(opacity:0);
 opacity:0;
 z-index:9999;
 position:absolute;
 top:0;
 left:0;
 display:none;
}
#div2{
 width:200px;
 height:200px;
 position:relative;
 background:#EEEEEE;
 border:1px solid #f00;
}
#div1{
 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;
}
#div2 p{
 padding:10px;
 line-height:24px;
 font-size:13px;
 text-indent:24px;
 color:#996600;
}
#div2 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.onload=function()
{
 var oDiv=document.getElementById("div1");
 var oDiv2=document.getElementById("div2");
 var zhezhao=document.getElementById("zhezhao");
 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.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  rightStart.x=right.offsetLeft;
  if(right.setCapture)
  {
   right.onmousemove=doDrag1;
   right.onmouseup=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.onmousemove=null;
   right.onmouseup=null;
   right.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag1,true);
   document.removeEventListener("mouseup",stopDrag1,true);
  }
 };
 //往下拽
 bottom.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  bottomStart.y=bottom.offsetTop;
  if(bottom.setCapture)
  {
   bottom.onmousemove=doDrag2;
   bottom.onmouseup=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.onmousemove=null;
   bottom.onmouseup=null;
   bottom.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag2,true);
   document.removeEventListener("mouseup",stopDrag2,true);
  }
 };
 //往左右同時拽
 oDiv.onmousedown=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.onmousemove=doDrag;
   oDiv.onmouseup=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.onmousemove=null;
   oDiv.onmouseup=null;
   oDiv.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag,true);
   document.removeEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='none';
 };
 
 //h2完美拖拽
 h2.onmousedown=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.onmousemove=doDrag3;
   h2.onmouseup=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";
 };
 function stopDrag3()
 {
  if(h2.releaseCapture)
  {
   h2.onmousemove=null;
   h2.onmouseup=null;
   h2.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag3,true);
   document.removeEventListener("mouseup",stopDrag3,true);
  }
 
  zhezhao.style.display='none';
 }
};
</script>
</head>
<body>
<div id="div2">
 <div style="width:100%; height:100%; overflow:hidden;">
 <h2>完美的拖拽</h2>
 <p>體驗不錯的JavaScript網(wǎng)頁拖動，除了拖動，還可拖動放大，像Windows窗口一樣被放大或縮小，只要按住層的右下角，就可以收放自如的放大或縮小。想使用的朋友，可將代碼里的Js封裝成類，從外部引入想必更合理些。'</p>
 <div id="right"></div>
 <div id="div1">拖</div>
 <div id="bottom"></div>
 </div>
</div>
<div id="zhezhao"></div>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

相關文章

  • JS數(shù)組reduce你不得不知道的25個高級用法

    JS數(shù)組reduce你不得不知道的25個高級用法

    reduce作為ES5新增的常規(guī)數(shù)組方法之一,對比forEach 、filter和map,在實際使用上好像有些被忽略，下面這篇文章主要給大家介紹了關于JS數(shù)組reduce你不得不知道的25個高級用法，需要的朋友可以參考下
    2021-06-06
  • JavaScript命令模式原理與用法實例詳解

    JavaScript命令模式原理與用法實例詳解

    這篇文章主要介紹了JavaScript命令模式原理與用法,結合實例形式詳細分析了JavaScript命令模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下
    2020-03-03
  • js點擊時關閉該范圍下拉菜單之外的菜單方法

    js點擊時關閉該范圍下拉菜單之外的菜單方法

    下面小編就為大家分享一篇js點擊時關閉該范圍下拉菜單之外的菜單方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • 淺析JavaScript中的變量復制、參數(shù)傳遞和作用域鏈

    淺析JavaScript中的變量復制、參數(shù)傳遞和作用域鏈

    這篇文章主要介紹了淺析JavaScript中的變量復制、參數(shù)傳遞和作用域鏈 的相關資料,需要的朋友可以參考下
    2016-01-01
  • JS如何實現(xiàn)form表單登錄驗證并使用MD5加密詳解

    JS如何實現(xiàn)form表單登錄驗證并使用MD5加密詳解

    表單驗證為終端用戶檢測無效的數(shù)據(jù)并標記這些錯誤,是一種用戶體驗的優(yōu)化,下面這篇文章主要給大家介紹了關于JS如何實現(xiàn)form表單登錄驗證并使用MD5加密的相關資料,需要的朋友可以參考下
    2023-06-06
  • JS 獲取滾動條高度示例代碼

    JS 獲取滾動條高度示例代碼

    滾動條高度如何獲取，方法有很多，在本文將為大家詳細介紹下如何使用js做到，下面有個不錯的示例，感興趣的朋友不要錯過
    2013-10-10
  • 總結js中的一些兼容性易錯的問題

    總結js中的一些兼容性易錯的問題

    下面小編就為大家分享一篇總結js中的一些兼容性易錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 微信小程序web-view環(huán)境下H5跳轉小程序頁面方法實例代碼

    微信小程序web-view環(huán)境下H5跳轉小程序頁面方法實例代碼

    微信小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗,下面這篇文章主要給大家介紹了關于微信小程序web-view環(huán)境下H5跳轉小程序頁面方法的相關資料,需要的朋友可以參考下
    2022-08-08
  • js中判斷一個數(shù)是不是素數(shù)的三種方法例子

    js中判斷一個數(shù)是不是素數(shù)的三種方法例子

    這篇文章主要給大家介紹了關于js中如何判斷一個數(shù)是不是素數(shù)的三種方法,素數(shù)(只能被1和本身整除的數(shù))規(guī)律:把這個數(shù)除以它之前的每一個數(shù)(從2開始)只要找到一個整除(余數(shù)為0)就是非素數(shù),需要的朋友可以參考下
    2023-10-10
  • JS對HTML表格進行增刪改操作

    JS對HTML表格進行增刪改操作

    這篇文章主要為大家詳細介紹了JS對HTML表格進行增刪改操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論