Heim > Artikel > Web-Frontend > Javascript-Imitationsspiel-Website mit Spezialeffekten, Mauszeiger bewegen, um Untermenü anzuzeigen
Javascript-Imitationsspiel-Website mit Spezialeffekten, Mauszeiger bewegen, um Untermenü anzuzeigen
- 巴扎黑Original
- 2017-08-22 11:30:031341Durchsuche
Das Beispiel in diesem Artikel beschreibt die Wirkung von Javascript, das den Mauszeiger auf dem Sina-Spielkanal imitiert, um das Untermenü anzuzeigen. Ich möchte es Ihnen als Referenz mitteilen. Die Details sind wie folgt:
Hier ist eine Demonstration des mit JS implementierten Web-Spaltenklassifizierungsmenüs. Die Bedienungsmethode ähnelt der einer Schiebetür Sie müssen nicht mit der Maus klicken, sondern einfach auf die Hauptseite der ersten Ebene setzen. Das angezeigte Klassifizierungsmenü der zweiten Ebene kann tatsächlich neu kategorisiert werden Insgesamt handelt es sich hierbei um ein Website-Menü, das die dreistufige Klassifizierung unterstützt. Derzeit nutzt Sina Games immer noch die Wirkung.
Schauen wir uns zunächst den Screenshot des Laufeffekts an:
Der spezifische Code lautet wie folgt:
<!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="空中网_新浪游戏" Das obige ist der detaillierte Inhalt vonJavascript-Imitationsspiel-Website mit Spezialeffekten, Mauszeiger bewegen, um Untermenü anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn