Rumah > Artikel > hujung hadapan web > Javascript仿游戏网站特效鼠标悬停显示子菜单
Javascript仿游戏网站特效鼠标悬停显示子菜单
- 巴扎黑asal
- 2017-08-22 11:30:031416semak imbas
本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果，分享给大家供大家参考。具体如下：
这里演示使用JS实现的网页栏目分类菜单，从新浪游戏频道扣下来的，操作方式类似于滑动门的效果，鼠标无需点击，只需把鼠标放在一级主菜单上，就可显示出二级分类菜单，这弹出的这个二级菜单中，实际上又重新进行了分类，可以说整体上，这是一款支持三级分类的网站菜单，目前新浪游戏还在用的效果哦。
先来看运行效果截图：
具体代码如下：
<!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>
<title>js仿新浪游戏频道导航条</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:14px "微软雅黑", arial, serif;color:#333;}
a,a:link,a:visited{color:#039;}
img{border:0;}
.header_bg{width:100%;height:128px;background:url(images/header.jpg) no-repeat center top;}
.header{margin:0 auto 0 auto;width:988px;height:128px;background:url(images/header_z.jpg) no-repeat center top;}
.nav{position:relative;left:4px;top:92px;width:950px;height:35px;background:#333;border-top:1px solid #444;}
.nav .list{list-style-type:none;margin-left:15px;}
.nav .list li{float:left;position:relative;height:35px;line-height:26px;}
.nav .list li .game_hover{float:left;display:block;margin-top:5px;height:30px;padding:0 10px 0 10px;color:#ccc;font-weight:bold;text-decoration:none;}
.nav .list li .game_hover_current,
.nav .list li .game_hover:hover{background-color:#fff;color:#575757;margin-top:4px;padding:0 9px 0 9px;border:1px solid #666;border-bottom:0;}
.hover_cont{display:none;position:absolute;width:auto;height:auto; top:35px;border:1px solid #666;border-top:0;border-bottom-width:2px;background:#fff;z-index:1000;}
.hover_cont .nav_cont{padding:15px;padding-bottom:0;}
.hover_cont .nav_li{display:inline-block;width:100%;height:100%;*height:auto;*margin-top:7px;padding-bottom:5px;*padding-bottom:12px;border-bottom:1px dashed #ccc;}
.hover_cont .nav_li_l{float:left;width:80px;color:#f60;font-weight:bold;}
.hover_cont .nav_li_r{float:left;color:#999;font-family:"宋体";font-size:10px;line-height:26px;}
.hover_cont .nav_li_r a{padding:0 1px 0 1px;color:#666;font-size:12px;text-decoration:none;}
.hover_cont .nav_li_r a:hover{color:red;}
.hover_cont .nav_li_r a.orange{color:#f60;}
.nav .list .wlyx{width:720px;left:0;}
.nav .list .djdj{width:800px;left:0;}
.nav .list .yy{width:740px;left:0;}
.nav .list .dwsy{width:750px;left:0;}
.nav .list .xsk{width:740px;left:0;}
.nav .list .cgwr{width:610px;left:0;}
.nav .list .xz{width:630px;right:0;}
.nav .list .mt{width:580px;right:0;}
.nav .list .kyx{width:610px;right:0;}
.nav .list .wt{width:510px;right:0;}
.nav .list .cy{width:540px;right:0;}
.nav .list .wb{width:710px;right:0;}
.nav .list .xyx{width:740px;right:0;}
.nav .list .sp{width:730px;right:0;}
.nav .list .sc{width:700px;right:0;}
.content{margin:15px auto 0 auto;width:980px;height:500px;background:#ccc;}
</style>
<script type="text/javascript">
var $$ = function (id) {
return document.getElementById(id);
}
var getByClass = function (oParent, sClass) {
var aEle = oParent.getElementsByTagName("*");
var re = new RegExp("\b" + sClass + "\b");
var arr = [];
for (var i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
var setMainNav = function () {
var oMainNav = $$("mainNav");
var aLi = getByClass(oMainNav, "list")[0].getElementsByTagName("li");
var aGameHover = getByClass(oMainNav, "game_hover");
var aHoverCont = getByClass(oMainNav, "hover_cont");
for (var i = 0; i < aGameHover.length; i++) {
aGameHover[i].index = i;
aGameHover[i].onmouseover = function () {
this.className += " "+"game_hover_current";
for (var j = 0; j < aHoverCont.length; j++) {
aHoverCont[j].index_j = j;
aHoverCont[j].style.display = "none";
aHoverCont[j].onmouseover = function () {
this.style.display = "block";
aGameHover[this.index_j].className += " "+"game_hover_current";
}
aHoverCont[j].onmouseout = function () {
this.style.display = "none";
}
}
if (aHoverCont[this.index]) {
aHoverCont[this.index].style.display = "block";
}
}
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseout = function () {
if (aHoverCont[this.index]) {
aHoverCont[this.index].style.display = "none";
}
aGameHover[this.index].className = "game_hover";
}
}
}
window.onload = function () {
setMainNav();
}
</script>
</head>
<body>
<div class="header_bg">
<div class="header">
<div class="nav" id="mainNav">
<ul class="list">
<li>
<a href="#" class="game_hover">网络游戏</a>
<div class="hover_cont wlyx">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
热门网游
</div>
<div class="nav_li_r">
<a href="#">问道</a>┊<a href="#">DOTA2</a>┊<a href="#">魔兽世界</a>┊<a href="#">梦幻西游</a>┊<a href="#">九阴真经</a>┊<a href="#">颓废之心</a>┊<a href="#">英雄联盟</a>┊<a href="#">天龙八部</a>┊<a href="#">龙之谷</a>┊<a href="#">星辰变</a><br />
<a href="#">剑灵</a>┊<a href="#">征途2</a>┊<a href="#">神鬼世界</a>┊<a href="#">剑侠情缘3</a>┊<a href="#">倩女幽魂</a>┊<a href="#">永恒之塔</a>┊<a href="#">仙侠世界</a>┊<a href="#">龙门客栈</a>┊<a href="#">独孤求败</a>┊<a href="#">神武</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
期待网游
</div>
<div class="nav_li_r">
<a href="#">问道</a>┊<a href="#">DOTA2</a>┊<a href="#">魔兽世界</a>┊<a href="#">梦幻西游</a>┊<a href="#">九阴真经</a>┊
<a href="#">颓废之心</a>┊<a href="#">英雄联盟</a>┊<a href="#">天龙八部</a>┊<a href="#">龙之谷</a>┊<a href="#">星辰变</a><br />
<a href="#">剑灵</a>┊<a href="#">征途2</a>┊<a href="#">神鬼世界</a>┊<a href="#">剑侠情缘3</a>┊<a href="#">倩女幽魂</a>┊
<a href="#">永恒之塔</a>┊<a href="#">仙侠世界</a>┊<a href="#">龙门客栈</a>┊<a href="#">独孤求败</a>┊<a href="#">神武</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
新游尾行
</div>
<div class="nav_li_r">
<a href="#" title="怪物猎人OL">怪物猎人OL全球玩家评论收集</a>┊<a href="#" title="圣王_新浪游戏">圣王首测视频解说</a>┊
<a href="#" title="龙门客栈_新浪游戏">龙门客栈五大特色详解</a>┊<a href="#" title="行星边际2_新浪游戏">行星边际2老玩家10大建议</a>┊
<a href="#" title="新游尾行汇总页" class="orange">更多>></a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
热门厂商
</div>
<div class="nav_li_r">
<a href="#" title="腾讯游戏_新浪游戏">腾讯游戏</a>┊<a href="#" title="网易游戏_新浪游戏">网易游戏</a>┊
<a href="#" title="盛大游戏_新浪游戏">盛大游戏</a>┊<a href="#" title="完美世界_新浪游戏">完美世界</a>┊
<a href="#" title="巨人网络_新浪游戏">巨人网络</a>┊<a href="#" title="畅游_新浪游戏">畅游</a>┊<a href="#" title="游戏蜗牛_新浪游戏">游戏蜗牛</a>┊
<a href="#" title="空中网_新浪游戏"Atas ialah kandungan terperinci Javascript仿游戏网站特效鼠标悬停显示子菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript使用七种方式创建对象的示例Artikel seterusnya：JavaScript代码分享：tab标签的切换
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional