下拉透明的菜单代码[网页特效]

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

在网页中弹出一个小的警告小窗口,有的网站用到这效果了!希望大家喜欢

<!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=utf-8" />

<title>knowsky.com</title>

<style>

*{ padding:0; margin:0; font-size:12px;}

#bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=50); width:100%; height:100%;position:absolute; top:0; left:0}

#info{height:0px; width:0px;top:50%; left:50%;position:absolute; line-height:1.7}

#center{background:#fff;border:1px solid #217AC1; width:300px; height:100px; position:absolute; margin:-50px -150px;}

#center strong{ display:block; padding:2px 5px; background:#EBF4FC; color:#519FEE;}

#center p{padding:10px; text-align:center; color:#1C6FB8;}

</style>

</head>

<body>

<span id="boxs"></span>

<a href="javascript:boxs(1);">点这里测试一下</a>

<script>

function boxs(v){

window.scrollTo(0,0);

var bo = document.getElementsByTagName('body')[0];

var ht = document.getElementsByTagName('html')[0];

var boht = document.getElementById('boxs');

boht.innerHTML = '';

bo.style.height='auto';

bo.style.overflow='auto';

ht.style.height='auto';

if(v == 1){

bo.style.height='100%';

bo.style.overflow='hidden';

ht.style.height='100%';

boht.innerHTML = '<div id="bg"></div><div id="info"><div id="center"><strong>友情提醒:</strong><p><a href="javascript:boxs(0);">关闭knowsky.com</a></p></div></div>';

}

}

</script><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />knowsky.com<br /><br /><br /><br /><br /><br />knowsky.com<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />knowsky.com<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />knowsky.com

<a href="javascript:boxs(1);">点这里测试一下</a>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航