当前位置：特效代码站 > 鼠标按钮 > 正文

点击按钮后打开一个可移动的层

来源：www.texiao.org.cn作者：cheney时间：08-02-26 点击：

<p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击按钮后打开一个可移动的层 特效代码站 www.texiao.org.cn</title>
<style>
td{  font-size:9pt; color:#666666; line-height:140%} 
body{  font-size:9pt; color:#666666; line-height:140%;}

a:link          { color: #666666; text-decoration: none }
a:visited       { color: #666666; text-decoration: none }
a:active        { color: #cc0000; text-decoration: none }
a:hover         { color: #cc0000; text-decoration: none}
</style>
</head>
<body>
<script language=javascript>
var cao_x,cao_y;
function qpsh() 
{
this.display=display; 
}
function display() 
{
  document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:#cccccc;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>点这个！</button></td></tr></table>");
  document.write("<div  id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");
  document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#F3FBFC;border:1px solid #cccccc;'>");
  document.write("<table width=200 height=25 background='/UploadFile/200802/26/B5102056582.jpg' onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");
  document.write("<tr align=center>");
  document.write("<td align=left>提示 www.texiao.org.cn</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br><img src='/UploadFile/200802/26/29102056283.gif'><br><br>特效代码站欢迎你！<br><br>[关闭]</span>");
  document.write("  </div>");
  document.write("</div>");
}
function caoMove(obj)  //实现层的拖移
{
  if(event.button==1)
  {
    var caoX=obj.clientLeft;
    var caoY=obj.clientTop;
    obj.style.pixelLeft=caoX+(event.x-cao_x);
    obj.style.pixelTop=caoY+(event.y-cao_y);
  }
}
</script>
<script language=javascript>
var mycao=new qpsh();
mycao.display();
</script>
</body>
</html>
</p>

[打印] [关闭]

上一篇：智能化的动态按钮效果下一篇：超级漂亮的图片弹性效果

当前位置：特效代码站 > 鼠标按钮 > 正文

点击按钮后打开一个可移动的层

本类最新

本类热门

相关代码

经典推荐

热门关注