JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼
本文實(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ì)有所幫助。
- iOS實(shí)現(xiàn)類似微信和支付寶的密碼輸入框(UIKeyInput協(xié)議)
- 支付寶支付開(kāi)發(fā)IOS圖文教程案例
- Android仿支付寶中余額寶的數(shù)字動(dòng)畫(huà)效果
- Android仿支付寶支付從底部彈窗效果
- js仿支付寶填寫(xiě)支付密碼效果實(shí)現(xiàn)多方框輸入密碼
- Android波紋擴(kuò)散效果之仿支付寶咻一咻功能實(shí)現(xiàn)波紋擴(kuò)散特效
- android編程實(shí)現(xiàn)類似于支付寶余額快速閃動(dòng)效果的方法
- JS實(shí)現(xiàn)淘寶支付寶網(wǎng)站的控制臺(tái)菜單效果
- iOS仿支付寶芝麻信用分?jǐn)?shù)儀表盤(pán)動(dòng)畫(huà)效果
相關(guān)文章
Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式
這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例
這篇文章主要介紹了js子頁(yè)面如何獲取父頁(yè)面數(shù)據(jù),需要的朋友可以參考下2014-05-05微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-0220個(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)搜索框歷史記錄功能,本文通過(guò)實(shí)例 代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法
這篇文章介紹了javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法,有需要的朋友可以參考一下2013-07-07Bootstrap每天必學(xué)之前端開(kāi)發(fā)框架
Bootstrap每天必學(xué)之前端開(kāi)發(fā)框架,今天這篇文章就帶著大家了解認(rèn)識(shí)當(dāng)下最流行的前端開(kāi)發(fā)框架Bootstrap,bootstrap深受大家喜愛(ài)的原因到底是什么呢,我們一探究竟。2015-11-11