首页 > 网络编程 > JavaScript > 网页特效 > 其他特效 > 网页对话框可拖动或关闭

Web网页对话框可拖动、关闭(自动)文字循环变化

2012-12-25 16:42:32 作者：

由Js实现的网页WEB对话框，鼠标可随意拖动改变位置，类似于有些软件初次运行时候弹出的每日提示，里面有文字在循环变化，时间到自动关闭,多么强大的一个web对话框啊，有兴趣的朋友可以参考下啊

<title>Web 页对话框</title> 
<style>span,table{font-size:10pt;margin:0pt}</style> 
<body onmousemove=move1()> 
<table id=table1 bordercolorlight=#d8d0c8 bordercolordark=#808080 border=2 style=display:block;position:absolute;width:400;height:257;left:100;top:50;background-color:#c0c0c0;> 
<tr><td style=vertical-align:top> 
<span id=span1 onselectstart="return false" style=cursor:nw-resize;width:400;background-color:#002468 onmousedown=down1() onmouseup=up1() style=color:white>&nbsp;Tip of the day -- Web 页对话框 
<span style=width:157;height:8;background:#002468></span> 
<span id=x style=color:black;background:#d8d0c8;width:18;height:8;vertical-align:middle;text-align:center;padding:0;margin:2;cursor:hand;border-style:outset;border-width:2 onclick=closewin()>X</span></span>

<span id=message style=width:270;height:70;background:white>大家好，我是dennisboys</span> 
</span>

<span>&nbsp;&nbsp;<input id=check1 type=checkbox checked onclick=checkone() onfocus=this.blur()>&nbsp;自动翻帖</span> 
<span style=width:155;height:20;background:#c0c0c0></span> 
<span><input type=button value="下一帖" style=background-color:#c0c0c0 onclick=nextmsg() onfocus=this.blur()></span> 
<span><input type=button value="关闭" style=background-color:#c0c0c0 onfocus=this.blur() onclick=closewin()></span> 
</td></tr> 
</table> 
</body> 
<script> 
var i=1 
var timer1 
var msg=new Array(); 
msg[0]="" 
msg[1]="大家好，我是dennisboys" 
msg[2]="我非常喜欢javascript" 
msg[3]="51js真是一个非常好的地方" 
msg[4]="我以后会常来的" 
msg[5]="就说到这吧，886" 
function nextmsg() 
{ 
num.innerText=" "+i+"/5" 
message.innerText=msg[i] 
i++ 
if(i>5)i=1 
clearTimeout(timer1) 
check1.checked=false 
} 
function checkone() 
{ 
if(check1.checked==true) 
{ 
num.innerText=" "+i+"/5" 
message.innerText=msg[i] 
i++ 
if(i>5)i=1 
timer1=setTimeout("checkone()",2000) 
}else{clearTimeout(timer1)} 
} 
checkone() 
var count=0 
function down1() 
{ 
cleft=table1.style.pixelLeft 
ctop=table1.style.pixelTop 
cx=event.clientX 
cy=event.clientY 
count=1 
} 
function move1() 
{ 
if(count==1) 
{table1.style.pixelLeft=cleft+event.clientX-cx 
table1.style.pixelTop=ctop+event.clientY-cy} 
} 
function up1() 
{ 
count=0 
} 
function closewin() 
{ 
table1.style.display='none' 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Web网页对话框可拖动、关闭(自动)文字循环变化

您可能感兴趣的文章: