jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單代碼
更新時(shí)間：2015年09月02日 16:27:14 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單,涉及jquery鼠標(biāo)事件操作頁(yè)面屬性定時(shí)變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單代碼。分享給大家供大家參考。具體如下：
這是一款基于jQuery的滑動(dòng)菜單，鼠標(biāo)移到某菜單項(xiàng)上，菜單的背景可以滑動(dòng)過(guò)來(lái)，平滑的滑動(dòng)效果，炫動(dòng)的導(dǎo)航效果，相比沒(méi)有動(dòng)畫(huà)的菜單，這款菜單真的挺不錯(cuò)哦。
先來(lái)看看運(yùn)行效果截圖：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-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>jQuery實(shí)用炫動(dòng)的導(dǎo)航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{width:960px;text-align:center;background:#06F;margin:0 auto;position:relative;}
.nav a{width:104px;height:41px;line-height:41px;display:inline-block;margin-right:30px;position:relative;z-index:11111;color:#FFF;}
.nav_bj{background:#F00;width:104px;height:41px;position:absolute;top:0;z-index:111;left:210px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var xxx,re;
$(".nav a").mouseover(function(){
xxx=$(this).position().left;
$(".nav_bj").animate({left:xxx})
clearTimeout(re);
}).mouseout(function(){
clearTimeout(re);
re=setTimeout(function(){
$(".nav_bj").animate({left:210})
},500);
})
})
</script>
</head>
<body>
<div class="nav">
<a href="#">首頁(yè)</a>
<a href="#">腳本之家</a>
<a href="#">腳本下載</a>
<a href="#">網(wǎng)頁(yè)特效</a>
<div class="nav_bj"></div>
</div>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery 延遲執(zhí)行實(shí)例介紹
- jquery延遲對(duì)象解析
- jQuery實(shí)現(xiàn)鼠標(biāo)滾動(dòng)圖片延遲加載效果附源碼下載
- jQuery實(shí)現(xiàn)延遲跳轉(zhuǎn)的方法
- jQuery延遲加載圖片插件Lazy Load使用指南
- 使用jquery實(shí)現(xiàn)的一個(gè)圖片延遲加載插件（含圖片延遲加載原理）
- Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
- jquery插件lazyload.js延遲加載圖片的使用方法
- jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jquery圖片延遲加載 前端開(kāi)發(fā)技能必備系列
- jQuery延遲執(zhí)行的實(shí)現(xiàn)方法
相關(guān)文章
jQuey將序列化對(duì)象在前臺(tái)顯示地實(shí)現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對(duì)象在前臺(tái)顯示地的幾種方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧2016-12-12
Bootstrap嵌入jqGrid，使你的table牛逼起來(lái)
這篇文章主要介紹了Bootstrap嵌入jqGrid，使你的table牛逼起來(lái),需要的朋友可以參考下2016-05-05
jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
鼠標(biāo)下拉滾動(dòng)置頂效果想必大家在瀏覽網(wǎng)頁(yè)時(shí)都有遇到過(guò)，下面有個(gè)不錯(cuò)的小例子，需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片跟隨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了微信小程序組件 marquee實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
ASP.NET jQuery 實(shí)例16 通過(guò)控件CustomValidator驗(yàn)證RadioButtonList
上一節(jié)已經(jīng)介紹過(guò)控件CustomValidator的使用方法，下面直接看代碼2012-02-02
基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程,文中的示例主要針對(duì)其播放音頻文件的用法,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了jquery表單插件Autotab使用方法，Autotab自動(dòng)Tab文本框，感興趣的小伙伴們可以參考一下2016-06-06
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁(yè)應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下2013-08-08
快速解決jquery之get緩存問(wèn)題的最簡(jiǎn)單方法介紹
要解決該問(wèn)題有很多辦法，最直接的是把$.get()方法換成$.ajax()，然后配置cache:false即可。我不喜歡$.ajax()繁瑣的配置方式，可采取以下最簡(jiǎn)單方式實(shí)現(xiàn)2013-12-12