熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js 實現鼠標移動div

2013-11-15 11:57:22  來源: JSP教程 

  js

  
var posX;
var posY;
fdiv = documentgetElementById("divBody");
documentgetElementById("divHead")onmousedown=function(e)
{
if(!e) e = windowevent; //IE
posX = eclientX parseInt(fdivstyleleft);
posY = eclientY parseInt(fdivstyletop);
documentonmousemove = mousemove;
}

documentonmouseup = function()
{
documentonmousemove = null;
}


function mousemove(ev)
{
if(ev==null) ev = windowevent;//IE
fdivstyleleft = (evclientX posX) + "px";
fdivstyletop = (evclientY posY) + "px";
}
html

  
<div class="divBody" id="divBody" style="left: px; top: px;"> <!這裡要加style="left: px; top: px;" 否則有問題>
<div class="divHead" id="divHead" style="cursor: move;">
</div>
<div class="content">
</div>
<div class="tail">
</div>
</div>

  css:

  divBody{
//margintop:px;
border: solid #CCC px;
width:px;
height:px;
position:relative;
zindex:;
marginleft:auto;
marginright:auto;
}
divHead{
width:px;
height:px;
backgroundcolor:#CCC;
}
content
{
width:px;
height:px;
}
tail{
background:#CCC;
height:px;
width:px;
display:tablecell;
verticalalign:middle;
}


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19969.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.