简谈网页高级特效之JS

来源：互联网发布：pubwin免刷卡软件编辑：程序博客网时间：2024/05/17 02:37

不少朋友在学习使用div+css做网页时头疼不已，的确麻烦。但是很多朋友却对网页里面的一些特效非常感兴趣，特别是对二级菜单，漂浮广告，广告切换等非常感兴趣，这里写一点东西谈谈自己对网页高级特效的一些认识，希望和各位朋友交流心得。

首先，我觉得网页里很多的特效其实就像魔法师变魔术一样，是用一些效果来迷惑人的眼睛，比方说二级菜单，最关键其实就是把二级菜单那个层隐藏起来，当鼠标经过一级菜单时，二级菜单才显示出来，关键代码：

document.getElementById.style.display,这行代码可以运用到很多我们看到网页特效中去，通过ID获得这个ID所代表的元素，可以是图片，文字，表格或者是层，我们只需要设置这个层的display属性是block或者是none就可以显示或者是隐藏这个层，其实也就是显示或者隐藏这个层所代表的内容，因为所有的层或者是表格只有放了具体的内容在网页中它才有价值。

例如如下就是一个纵向的二级菜单
<html >
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type=text/javascript>
/**
*菜单的构造,需要绑定到onload
*/
startList = function() {
if (document.all&&document.getElementById) {
dropmenuRoot = document.getElementById("dropmenu");
for (i=0; i<dropmenuRoot.childNodes.length; i++) {
node = dropmenuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
}
}
}
}
window.onload=startList;
</script>
</head>
<style type="text/css">
body { font: normal 11px verdana; background: #45b97c; position:absolute }
ul { margin: 0; padding: 0; }
li { list-style-position: outside; list-style: none;}
a { text-decoration: none; color: #666;}
ul#dropmenu,ul#dropmenu ul{
margin: 0 auto;
text-align: left;
padding: 0;
list-style: none;
z-index: 99;
}
ul#dropmenu {
width: 774px;
display: block;
height: 24px;
clear: both;
border: 1px solid #ccc;
text-align: center;
background: #fff;
}
ul#dropmenu li {
position: relative;
z-index: 999;
float: left;
}
ul#dropmenu ul li{
float: left;
display: block;
}
ul#dropmenu ul {
/*width: 122px;
w\idth: 120px;*/
height: auto;
position: absolute;
text-align: left;
left: 0px;
display: none;
border: solid 1px #ccc;
}
/*当鼠标在子菜单和父菜单上时，父菜单的样式*/
ul#dropmenu li.over a,ul#dropmenu li:hover a{
border-color: #ccc;
background: #c00;
color: #fff;
}
/*将子菜单的样式清除*/
ul#dropmenu li.over ul a,ul#dropmenu li:hover ul a{
font-weight: normal;
color: #666;
background: #fff;;
}
/*子菜单的hover样式*/
ul#dropmenu li.over ul a:hover,ul#dropmenu li:hover ul a:hover{
font-weight: normal;
color: #cc0000;
font-weight: bold;
background: #f6f6f6;
}
/* Styles for Menu Items */
ul#dropmenu a {
display: block;
padding: 0 0 0 10px;
width: 106px;
w\idth: 96px;
color: #666;
line-height: 24px;
}
ul#dropmenu ul li{
width: 110px;
border: 0;
}
/* End */
ul#dropmenu ul a {
FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* 透明 */
padding: 2px 0px 2px 10px;
border: 0;
width: 120px;
w\idth: 110px;/* Sub Menu Styles */
}
ul#dropmenu li:hover ul,ul#dropmenu li.over ul {
display: block; /* The magic */
}
</style>
<body>
<div id="nav">
<ul id="dropmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li> <li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
</ul>
</div>
</body>
</html>

很多朋友对二级联动也非常感兴趣，其实我们用JS就可以非常轻松的做出一个二级联动，关键是使用到我们的数组

<option selected>请选择国家</option>

</select>

<option value=" " selected>请选择城市</option>

</select>

<!--

var groups=document.isc.example.options.length

var group=new Array(groups)

for (i=0; i<groups; i++)

group[i]=new Array()

group[0][0]=new Option("海淀","北京海淀");

group[1][0]=new Option("朝阳","北京朝阳");

group[1][1]=new Option("丰台","北京丰台");

group[1][2]=new Option("顺义","北京顺义");

group[2][0]=new Option("廊坊","河北廊坊");

group[2][1]=new Option("定兴","河北定兴");

group[2][2]=new Option("保定","河北保定");

var temp=document.isc.stage2

function redirect(x){

for (m=temp.options.length-1;m>0;m--)

temp.options[M]-=null[/M]

for (i=0;i<group[x].length;i++){

temp.options[i]=new Option(group[x][i].text,group[x][i].value)

}

//-->

</script>

</FORM>

还有就是大家对网页里面的时间很感兴趣，其实这个是最简单的，下个这个例子很好用

<html>
<head>
<title>数字时钟</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--<span id="liveclock" style"=width: 109px; height: 15px"></span>
<SCRIPT language=javascript>
function showTime()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
if(hours<=9)
hours="0"+hours
if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds

myclock=hours+":"+minutes+":"+seconds;
liveclock.innerHTML=myclock
setTimeout("showTime()",1000)
}
showTime();
//
</SCRIPT>-->
<div id="showClock"></div>

function showTime()
{
  var date=new Date();
  var year=date.getYear();
  var month=date.getMonth()+1;
  var day=date.getDate()
  var hours=date.getHours();
  var mi=date.getMinutes();
  var se=date.getSeconds();

  var week=date.getDay();
  if(week==1) week="星期一";
  if(week==2) week="星期二";
  if(week==3) week="星期三";
  if(week==4) week="星期四";
  if(week==5) week="星期五";
  if(week==6) week="星期六";
  if(week==7) week="星期日";


  if(hours<=9)
  hours="0"+hours;
  if(hours<=9)
  mi="0"+mi;
  if(se<=9)
  se="0"+se;

  show="今天是"+year+"年"+month+"月"+day+"日 "+week+"   "+hours+":"+mi+":"+se;

  showClock.innerHTML=show;

  setTimeout("showTime()",1000);

}

showTime();

</script>
</body>
</html>

相信这个大家一看就会，调用最简单的方法时间类来完成年月日小时分钟和秒。

这里用到了三个实例，后面两个是我经常写得，前面样式是我找的，以后如果有什么问题大家可以一起研究一下，因为我也超喜欢JS特效，觉得放一些特效在网页里特别酷，今天就写到这里。