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