suchen

Heim  >  Artikel  >  Web-Frontend  >  JS CSS implementiert imitierte Alipay-Menüauswahleffekte mit code_javascript-Fähigkeiten

JS CSS implementiert imitierte Alipay-Menüauswahleffekte mit code_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:38:091214Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-CSS-Code zur Implementierung des imitierten Alipay-Menüauswahleffekts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein wunderschönes JS-CSS-Imitat-Alipay-Menü. Der Gesamtstil und die Form unterscheiden sich nicht vom Alipay-Menü. Wenn Sie genau hinschauen, werden Sie feststellen, dass dies von einem CSS-Enthusiasten selbst gemacht wurde CSS-Code an Der Autor möchte sich dafür bedanken, dass er uns ein so wunderbares Menü zur Verfügung gestellt hat.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/

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>CSS仿支付宝菜单</title>
<style type="text/css">
* { padding:0px; margin:0px; list-style:none; }
body { font-size:14px; font-family:Verdana; }
#nav ul.nav_left, #nav ul.nav_right, #nav ul.nav_main li, #nav ul.nav_main li.over a, #nav ul.nav_main li a span, #nav ul.nav_main li.over a span { background:url(images/b.gif) no-repeat; }
#nav { background:url(images/b.gif) repeat-x; }
#wrap { width:960px; margin:0 auto; height:auto; overflow:hidden; padding-top:50px; }
#nav { background-position: 0 -178px; height:79px; width:960px; }
#nav ul.nav_left { background-position: 0 0; float:left; width:10px; height:79px; display:inline; }
#nav ul.nav_right { background-position:-20px 0; float:right; width:10px; height:79px; display:inline; }
#nav ul.nav_main { float:left; display:inline; }
#nav ul.nav_main li { background-position: -41px 0; float:left; padding:0 5px; }
#nav ul.nav_main li a { height:40px; display:block; text-decoration:none; float:left; }
#nav ul.nav_main li.over a { background-position: 0 -85px; }
#nav ul.nav_main li a span { background-position: right -90px; height:22px; display:block; padding-right:30px; padding-left:20px; padding-top:18px; color:#fff; font-weight:bold; overflow:hidden; cursor:pointer; float:left; margin-left:15px; display:inline; }
#nav ul.nav_main li.over a span { background-position: right -130px; color:#555; }
#nav ul.nav_main li#show_0 { background:none; }
</style>
<script type="text/javascript">
function $(id) {
 return document.getElementById(id);
}
window.onload = function() {
 var Root = $("nav_li").getElementsByTagName("li");
 for (var i = 0; i < Root.length; i++) {
  c = Root[i];
  c.setAttribute("id", "show_" + i);
  var xp = function(i) {
   show(i);
  };
  c.onmouseover = dete_bibao(xp, i, c);
 }
}
function show(j) {
 for (var n = 0; n <= 6; n++) {
  if ($("show_" + n).className != "s") {
   $("show_" + n).className = "s";
  }
  if (n == j) {
   $("show_" + n).className = "over";
  }
 }
}
function dete_bibao(fn, params, obj) {
 return function() {
  fn.call(obj || window, params);
 }
}
</script>
</head>
<body>
<div id="wrap">
 <div id="nav">
  <ul class="nav_left">
  </ul>
  <ul class="nav_main" id="nav_li">
   <li><a href="#"><span>首页</span></a></li>
   <li><a href="#"><span>脚本代码</span></a></li>
   <li><a href="#"><span>脚本下载</span></a></li>
   <li><a href="#"><span>网页特效</span></a></li>
   <li><a href="#"><span>生活社区</span></a></li>
   <li><a href="#"><span>休闲电影</span></a></li>
   <li><a href="#"><span>哈哼~</span></a></li>
  </ul>
  <ul class="nav_right">
  </ul>
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

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
Vorheriger Artikel：JS CSS realisiert den dynamischen Scroll-Navigationsleisteneffekt, wenn die Maus darüber gleitet_Javascript-FähigkeitenNächster Artikel：JS CSS realisiert den dynamischen Scroll-Navigationsleisteneffekt, wenn die Maus darüber gleitet_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen