基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
先來看一下中英文切換的導(dǎo)航條效果圖:
我采用了兩種方式實(shí)現(xiàn),一種用css3,另一種是用jquery實(shí)現(xiàn)。
首先說一下用css3如何實(shí)現(xiàn):
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <link rel="stylesheet" href="../css/demo2.css"> </head> <body> <div class="nav"> <ul class="nav-list"> <li> <a href="index.html"> <b>index</b> <i>首頁</i> </a> </li> <li> <a href="index.html"> <b>bbs</b> <i>論壇</i> </a> </li> <li> <a href="index.html"> <b>blog</b> <i>博客</i> </a> </li> <li> <a href="index.html"> <b>mall</b> <i>商城</i> </a> </li> <li> <a href="index.html"> <b>download</b> <i>下載</i> </a> </li> </ul> </div> </body> </html>
css:
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; background-color: #222; margin-top:100px; overflow: hidden; } .nav-list{ width:1000px; margin:0 auto; height: 40px; } .nav-list li { float: left; } .nav-list li a{ display: block; transition: 0.2s; } .nav-list li b,.nav-list li i{ color:#aaa; line-height: 40px; display: block; padding:0 30px; text-align: center; } .nav-list li b{ font-weight:normal; } .nav-list li i{ font-style: normal; color:#fff; background-color: #333; } .nav-list li a:hover{ margin-top:-40px; }
紅色部分就是這個(gè)過程的實(shí)現(xiàn),利用位置的變化,當(dāng)鼠標(biāo)移上去的時(shí)候,顯示中文,也就是將英文移開,值得注意的是,需要利用overflow:hidden屬性,將其隱藏。如果想要速度慢一點(diǎn)的話,可以利用transition屬性設(shè)置變化時(shí)間,就可以減慢變化速度。
接著是用jquery實(shí)現(xiàn):
css:
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; background-color: #222; margin-top:100px; overflow: hidden; } .nav-list{ width:1000px; margin:0 auto; height: 40px; } .nav-list li { float: left; } .nav-list li a{ display: block; } .nav-list li b,.nav-list li i{ color:#aaa; line-height: 40px; display: block; padding:0 30px; text-align: center; } .nav-list li b{ font-weight:normal; } .nav-list li i{ font-style: normal; color:#fff; background-color: #333; }
jquery:
$(function(){ $(".nav-list li a").hover(function(){ $(this).stop().animate({"margin-top":-40},200) },function(){ $(this).stop().animate({"margin-top":0},200) }); });
實(shí)現(xiàn)功能的重點(diǎn)是animate()函數(shù)的實(shí)現(xiàn),通過設(shè)置margin-top和時(shí)間實(shí)現(xiàn),為了防止快速經(jīng)過時(shí),所有的都會(huì)變化(如下圖所示),需要在animate()函數(shù)前面加上stop()函數(shù),即在所有動(dòng)畫之前,先停止其他的動(dòng)畫,然后再開始這個(gè)動(dòng)畫。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery結(jié)合html實(shí)現(xiàn)中英文頁面切換
- jQuery實(shí)現(xiàn)鼠標(biāo)移入移出事件切換功能示例
- jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】
- jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換
- jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果
- jquery橫向縱向鼠標(biāo)滾輪全屏切換
- 用jquery的attr方法實(shí)現(xiàn)圖片切換效果
- jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
- jquery淡化版banner異步圖片文字效果切換圖片特效
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jQuery實(shí)現(xiàn)的中英文切換功能示例
相關(guān)文章
jQuery選擇器源碼解讀(四):tokenize方法的Expr.preFilter
這篇文章主要介紹了jQuery選擇器源碼解讀(四):tokenize方法的Expr.preFilter,本文用詳細(xì)的注釋解讀了tokenize方法的Expr.preFilter的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03Jquery+AJAX實(shí)現(xiàn)無刷新上傳并重命名文件操作示例【PHP后臺(tái)接收】
這篇文章主要介紹了Jquery+AJAX實(shí)現(xiàn)無刷新上傳并重命名文件操作,結(jié)合實(shí)例形式分析了jQuery+ajax前臺(tái)上傳文件與PHP后臺(tái)接收處理相關(guān)操作技巧,需要的朋友可以參考下2020-05-05淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例
本篇文章主要介紹了淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03jQuery實(shí)現(xiàn)原理的模擬代碼 -6 代碼下載
前幾篇文章中的示例代碼,去掉了幾個(gè) bug, 這里一起提供下載。2010-08-08Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))
Jquery AJAX實(shí)現(xiàn)頁面的統(tǒng)計(jì)代碼,后臺(tái)用的是php,這篇文章主要是學(xué)習(xí)jquery下ajax的簡(jiǎn)單實(shí)現(xiàn)。2010-06-06jQuery實(shí)現(xiàn)的支持IE的html滑動(dòng)條
本文給大家分享的是一段使用jQuery實(shí)現(xiàn)支持IE的html滑動(dòng)條代碼,效果非常不錯(cuò),這里推薦給大家,希望大家能夠喜歡。2015-03-03animate動(dòng)畫示例(淚奔的小孩)及stop和delay的使用
實(shí)現(xiàn)原理:停止動(dòng)畫,當(dāng)一個(gè)元素有一個(gè)動(dòng)畫隊(duì)列時(shí),停止的是當(dāng)前動(dòng)畫,緊接著執(zhí)行下一個(gè)動(dòng)畫,具體代碼如下,感興趣的朋友可以參考下哈,希望對(duì)你學(xué)習(xí)jquery動(dòng)畫有所幫助2013-05-05