Javascript常见的效果汇总（二）_Javascript教程(5)_H5之家

弹出提示的效果
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cao888---提示</title>
</head>
<body>
<script language=javascript>
var cao_x,cao_y;
function cao888()
{
this.display=display;
}
function display()
{
document.write("<table align=center><tr><td><button type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>");
document.write("<div >");
document.write("<div>");
document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)'>");
document.write("<tr align=center>");
document.write("<td align=left>提示:CAO888</td>");
document.write("</tr>");
document.write("</table>");
document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<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 cao888();
mycao.display();
</script>
</body>
</html>