社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 主體

Javascript仿遊戲網站特效滑鼠懸停顯示子選單

巴扎黑
發布： 2017-08-22 11:30:03
原創
1405 人瀏覽過

本文實例講述了Javascript仿新浪遊戲頻道滑鼠懸停顯示子選單效果，分享給大家供大家參考。具體如下：

這裡示範使用JS實現的網頁欄目分類選單，從新浪遊戲頻道扣下來的，操作方式類似於滑動門的效果，滑鼠無需點擊，只需把滑鼠放在一級主選單上，就可顯示出二級分類選單，這彈出的這個二級選單中，實際上又重新進行了分類，可以說整體上，這是一款支援三級分類的網站選單，目前新浪遊戲還在用的效果哦。

先來看運行效果截圖：

Javascript仿遊戲網站特效滑鼠懸停顯示子選單

#具體程式碼如下：

<!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="空中网_新浪游戏"
登入後複製

以上是Javascript仿遊戲網站特效滑鼠懸停顯示子選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
javascript js 遊戲網站
來源：php.cn
上一篇：JavaScript使用七種方式建立物件的範例 下一篇：JavaScript程式碼分享：tab標籤的切換
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}
來自於 2024-04-06 19:25:49
0
1
505
放大 d3.js 時散佈圖點不會保持值 這是我第一次使用d3.js，所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止，我幾乎一切正常，但當我縮放時，...
來自於 2024-04-06 18:16:26
0
1
403
供應商特定偽元素上的 JavaScript 懸停事件 我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...
來自於 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀 我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中，它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....
來自於 2024-04-06 12:53:11
0
1
376
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板