10-12.htm

JavaScript网页特效实例大全

<style>
<!--
#iewrap{
position:relative;
height:30px
}
#iewrap2{
position:absolute
}
#dropmenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}
a:hover {  color: #FF0000}
body {  font-family: "隶书"; font-size: 12pt; text-decoration: none}
a { font-family: "隶书"; font-size: 12pt; text-decoration: none}
-->
</style>
<ilayer id="dropmenu01" height=35px>
<layer id="dropmenu02" visibility=show>
<span id="iewrap">
<span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="隶书">
<a href="http;/">网站链接</a></font> 
</span>
</span>
</layer>
</ilayer>
<script language="JavaScript">
var enableeffect=true<!--是否显示效果-->
var selection=new Array()<!--定义数组变量-->
selection[0]='<font face="隶书"><a href="http://www.tom.com">TOM</a></font><br>';
selection[1]='<font face="隶书"><a href="http://www.sina.com">新浪</a></font><br>';
selection[2]='<font face="隶书"><a href="http://www.sohu.com">搜狐</a></font><br>';
selection[3]='<font face="隶书"><a href="http://www.nba.com">NBA</a></font><br>';




function dropit2(){
if (document.all){<!--对于ie浏览器-->
dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX<!--获得下拉菜单的左边界-->
dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18<!--获得下拉菜单的上边界-->
if (dropmenu03.style.visibility=="hidden"){<!--如果当前下拉菜单为隐藏-->
if (enableeffect)<!--如果允许显示效果-->
dropmenu03.filters.revealTrans.apply()<!--应用显示效果-->
dropmenu03.style.visibility="visible"<!--设置下拉菜单可视-->
if (enableeffect)<!--如果允许显示效果-->
dropmenu03.filters.revealTrans.play()<!--开始播放效果-->
}
else{<!--否则当前下拉菜单为显示状态-->
hidemenu()<!--隐藏下拉菜单-->
}
}
}
function dropit(e){
if (document.dropmenu03.visibility=="hide")<!--如果当前下拉菜单为隐藏状态-->
document.dropmenu03.visibility="show"<!--切换到显示状态-->
else<!--如果当前下拉菜单为显示状态-->
document.dropmenu03.visibility="hide"<!--切换到隐藏状态-->
document.dropmenu03.left=e.pageX-e.layerX<!--设置下拉菜单的左边界-->
document.dropmenu03.top=e.pageY-e.layerY+19<!--设置下拉菜单的上边界-->
return false
}

function hidemenu(){
if (enableeffect)<!--如果效果显示被允许-->
dropmenu03.filters.revealTrans.stop()<!--将效果停止-->
dropmenu03.style.visibility="hidden"<!--同时菜单隐藏-->
}

function hidemenu2(){
document.dropmenu03.visibility="hide"<!--直接将菜单隐藏-->
}

 if (document.all)
document.body.onclick=hidemenu<!--ie浏览器中的事件映射函数-->
</script>
<div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:#E0E0E0;background-color:#E0E0E0;width:60;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript">
if (document.all)<!--对于ie浏览器-->
dropmenu03.style.padding='4px'<!--设置格式中的象素-->
for (i=0;i<selection.length;i++)
document.write(selection[i])<!--依次显示每一个菜单链接-->
</script>
</div>




<!--本例程实现了爆炸式菜单链接-->
<!--动态菜单的实现方法-->
<!--统一格式的具体实现-->
<!--程序对不同浏览器的支持-->
<!--鼠标事件的响应-->