本文实例讲述了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!
Hubungan antara JavaScript, C, dan penyemak imbasMay 01, 2025 am 12:06 AMPengenalan Saya tahu anda mungkin merasa pelik, apa sebenarnya yang perlu dilakukan oleh JavaScript, C dan penyemak imbas? Mereka seolah -olah tidak berkaitan, tetapi sebenarnya, mereka memainkan peranan yang sangat penting dalam pembangunan web moden. Hari ini kita akan membincangkan hubungan rapat antara ketiga -tiga ini. Melalui artikel ini, anda akan mempelajari bagaimana JavaScript berjalan dalam penyemak imbas, peranan C dalam enjin pelayar, dan bagaimana mereka bekerjasama untuk memacu rendering dan interaksi laman web. Kita semua tahu hubungan antara JavaScript dan penyemak imbas. JavaScript adalah bahasa utama pembangunan front-end. Ia berjalan secara langsung di penyemak imbas, menjadikan laman web jelas dan menarik. Adakah anda pernah tertanya -tanya mengapa Javascr
Aliran node.js dengan typescriptApr 30, 2025 am 08:22 AMNode.js cemerlang pada I/O yang cekap, sebahagian besarnya terima kasih kepada aliran. Aliran memproses data secara berperingkat, mengelakkan beban memori-ideal untuk fail besar, tugas rangkaian, dan aplikasi masa nyata. Menggabungkan sungai dengan keselamatan jenis typescript mencipta powe
Python vs JavaScript: Pertimbangan Prestasi dan KecekapanApr 30, 2025 am 12:08 AMPerbezaan prestasi dan kecekapan antara Python dan JavaScript terutamanya dicerminkan dalam: 1) sebagai bahasa yang ditafsirkan, Python berjalan perlahan tetapi mempunyai kecekapan pembangunan yang tinggi dan sesuai untuk pembangunan prototaip pesat; 2) JavaScript adalah terhad kepada benang tunggal dalam penyemak imbas, tetapi I/O multi-threading dan asynchronous boleh digunakan untuk meningkatkan prestasi dalam node.js, dan kedua-duanya mempunyai kelebihan dalam projek sebenar.
Asal JavaScript: Meneroka Bahasa PelaksanaannyaApr 29, 2025 am 12:51 AMJavaScript berasal pada tahun 1995 dan dicipta oleh Brandon Ike, dan menyedari bahasa itu menjadi C. 1.C Language menyediakan keupayaan pengaturcaraan prestasi tinggi dan sistem untuk JavaScript. 2. Pengurusan memori JavaScript dan pengoptimuman prestasi bergantung pada bahasa C. 3. Ciri lintas platform bahasa C membantu JavaScript berjalan dengan cekap pada sistem operasi yang berbeza.
Di sebalik tabir: Apa bahasa JavaScript?Apr 28, 2025 am 12:01 AMJavaScript berjalan dalam penyemak imbas dan persekitaran Node.js dan bergantung pada enjin JavaScript untuk menghuraikan dan melaksanakan kod. 1) menjana pokok sintaks abstrak (AST) di peringkat parsing; 2) menukar AST ke bytecode atau kod mesin dalam peringkat penyusunan; 3) Laksanakan kod yang disusun dalam peringkat pelaksanaan.
Masa Depan Python dan JavaScript: Trend dan RamalanApr 27, 2025 am 12:21 AMTrend masa depan Python dan JavaScript termasuk: 1. Kedua -duanya akan terus mengembangkan senario aplikasi dalam bidang masing -masing dan membuat lebih banyak penemuan dalam prestasi.
Python vs JavaScript: Persekitaran dan Alat PembangunanApr 26, 2025 am 12:09 AMKedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.
Adakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AMYa, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
