欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼

 更新時(shí)間:2015年09月25日 09:28:29   作者:企鵝  
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)設(shè)置頁(yè)面css樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼。分享給大家供大家參考。具體如下:

這是一個(gè)漂亮的JS+CSS仿支付寶菜單,總體風(fēng)格和形式與支付寶的菜單沒(méi)什么兩樣,細(xì)心會(huì)發(fā)現(xiàn)這是一個(gè)CSS愛(ài)好者自己手功完成的,自己美化圖片,重寫(xiě)CSS代碼,為作者給我們奉獻(xiàn)這么好的菜單而表示感謝。

運(yùn)行效果截圖如下:

在線演示地址如下:

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

具體代碼如下:

<!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>首頁(yè)</span></a></li>
   <li><a href="#"><span>腳本代碼</span></a></li>
   <li><a href="#"><span>腳本下載</span></a></li>
   <li><a href="#"><span>網(wǎng)頁(yè)特效</span></a></li>
   <li><a href="#"><span>生活社區(qū)</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>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式

    Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式

    這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-03-03
  • js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例

    js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例

    這篇文章主要介紹了js子頁(yè)面如何獲取父頁(yè)面數(shù)據(jù),需要的朋友可以參考下
    2014-05-05
  • 詳解webpack模塊化管理和打包工具

    詳解webpack模塊化管理和打包工具

    這篇文章主要介紹了詳解webpack模塊化管理和打包工具,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • TypeScript合并兩個(gè)排序鏈表的方法詳解

    TypeScript合并兩個(gè)排序鏈表的方法詳解

    給定兩個(gè)遞增排序的鏈表,如何將這兩個(gè)鏈表合并?合并后的鏈表依然按照遞增排序。本文就跟大家如何利用TypeScript實(shí)現(xiàn)這一效果,感興趣的可以學(xué)習(xí)一下
    2022-06-06
  • 微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能

    微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2023-02-02
  • 20個(gè)常見(jiàn)的JavaScript數(shù)組操作總結(jié)

    20個(gè)常見(jiàn)的JavaScript數(shù)組操作總結(jié)

    JavaScript中的Array對(duì)象與其他編程語(yǔ)言中的數(shù)組一樣,是一組數(shù)據(jù)的集合。在JavaScript中,數(shù)組里面的數(shù)據(jù)可以是不同類型的,并具有用于執(zhí)行數(shù)組常見(jiàn)操作的方法,本文整理了一些常用的,需要的可以參考一下
    2022-09-09
  • 使用JS location實(shí)現(xiàn)搜索框歷史記錄功能

    使用JS location實(shí)現(xiàn)搜索框歷史記錄功能

    這篇文章主要介紹了使用JS location實(shí)現(xiàn)搜索框歷史記錄功能,本文通過(guò)實(shí)例 代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • 為什么js中不推薦使用eval函數(shù)(原因分析)

    為什么js中不推薦使用eval函數(shù)(原因分析)

    'eval'函數(shù)是javascript中的一個(gè)內(nèi)置函數(shù),它的主要作用是將傳入的字符串作為代碼來(lái)執(zhí)行,這篇文章主要介紹了為什么js中不推薦使用eval函數(shù),需要的朋友可以參考下
    2023-10-10
  • javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法

    javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法

    這篇文章介紹了javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法,有需要的朋友可以參考一下
    2013-07-07
  • Bootstrap每天必學(xué)之前端開(kāi)發(fā)框架

    Bootstrap每天必學(xué)之前端開(kāi)發(fā)框架

    Bootstrap每天必學(xué)之前端開(kāi)發(fā)框架,今天這篇文章就帶著大家了解認(rèn)識(shí)當(dāng)下最流行的前端開(kāi)發(fā)框架Bootstrap,bootstrap深受大家喜愛(ài)的原因到底是什么呢,我們一探究竟。
    2015-11-11

最新評(píng)論