js圖片卷簾門導(dǎo)航菜單特效代碼分享
更新時(shí)間：2022年02月23日 11:25:49 投稿：lijiao
這篇文章主要介紹了js圖片卷簾門導(dǎo)航菜單特效，一款很新穎的圖片導(dǎo)航菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例講述了jQuery超精致圖片輪播幻燈片特效。分享給大家供大家參考。具體如下：
這是一款基于js實(shí)現(xiàn)圖片卷簾門導(dǎo)航菜單特效代碼，與以往的導(dǎo)航菜單相比，更具有創(chuàng)新性，不止是簡(jiǎn)單的向用戶展示信息，而是更加豐富網(wǎng)站的整體內(nèi)容。
運(yùn)行效果圖：-------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
在head區(qū)域引入CSS樣式：
<link href="css/style.css" rel="stylesheet" type="text/css" />
為大家分享的js圖片卷簾門效果代碼如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS圖片卷簾門效果</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set css in Firefox (Required to use the backgroundPosition js)
$('#shutter1').css({backgroundPosition: '0px 0px'});
$('#shutter2').css({backgroundPosition: '0px 0px'});
$('#shutter3').css({backgroundPosition: '0px 0px'});
$('#shutter4').css({backgroundPosition: '0px 0px'});
//Animate the shutter
$(".link").hover(function(){
$(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
}, function() {
$(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
});
});
</script>
</head>
<body>
<DIV align="center" ><br /><br />
<ul id="menuback">
<li class="shutter" id="shutter1"><a class="link" href="http://www.dbjr.com.cn/" target="_blank">Link 1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="http://www.dbjr.com.cn/" target="_blank">Link 2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="http://www.dbjr.com.cn/" target="_blank">Link 3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="http://www.dbjr.com.cn/" target="_blank">Link 4</a></li>
</ul>
</div>
</body>
</html>以上就是為大家分享的js圖片卷簾門導(dǎo)航菜單特效代碼代碼，希望大家可以喜歡，并應(yīng)用到實(shí)踐中。
您可能感興趣的文章:
- Javascript+CSS實(shí)現(xiàn)影像卷簾效果思路及代碼
- js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
- JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果
- JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開多級(jí)菜單效果
- js實(shí)現(xiàn)可折疊展開的手風(fēng)琴菜單效果
- JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)折疊與展開菜單效果代碼
- js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
- js實(shí)現(xiàn)超簡(jiǎn)單的展開、折疊目錄代碼
- Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
- 原生Js與jquery的多組處理, 僅展開一個(gè)區(qū)塊的折疊效果
- JS+DIV實(shí)現(xiàn)的卷簾效果示例
相關(guān)文章
新增加的內(nèi)容是如何將div的scrollbar自動(dòng)移動(dòng)最下面
在做動(dòng)態(tài)增長(zhǎng)的div時(shí)，一般都是將內(nèi)容append到div的最下面，但這會(huì)帶來(lái)一個(gè)比較蛋疼的問(wèn)題，那就是新增加的內(nèi)容會(huì)被遮在最下面，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2014-01-01 
JavaScript實(shí)現(xiàn)的反序列化json字符串操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的反序列化json字符串操作,結(jié)合實(shí)例形式分析了eval與JSON.parse兩種反序列化json字符串的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07 
JavaScript中計(jì)算網(wǎng)頁(yè)中某個(gè)元素的位置
這篇文章主要介紹了JavaScript中計(jì)算網(wǎng)頁(yè)中某個(gè)元素的位置,本文先是講解了一些必要的知識(shí)和實(shí)現(xiàn)難點(diǎn),然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-06-06 
JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果
這篇文章主要介紹了JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果,涉及JavaScript操作cookie及導(dǎo)航樣式布局的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10 
vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn)
這篇文章主要介紹了vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn),通過(guò)實(shí)例代碼補(bǔ)充介紹了vue+elementui的this.$loading遮罩使用方法,需要的朋友可以參考下
2024-03-03 
JavaScript獲取時(shí)區(qū)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了JavaScript獲取時(shí)區(qū)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09 
js實(shí)現(xiàn)鍵盤操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼
實(shí)現(xiàn)鍵盤操作實(shí)現(xiàn)div的移動(dòng)，最關(guān)鍵的一點(diǎn)：獲取div對(duì)象，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-06-06 
JavaScript在控件上添加倒計(jì)時(shí)功能的實(shí)現(xiàn)代碼
JavaScript在控件上添加倒計(jì)時(shí)功能，主要原理是利用控件的setEnable(true)/setEnable(false)來(lái)進(jìn)行設(shè)置控件的可用與不可用狀態(tài)，實(shí)現(xiàn)過(guò)程非常簡(jiǎn)單，需要的的朋友參考下吧
2017-07-07 
這篇文章主要為大家詳細(xì)介紹了jsonp跨域請(qǐng)求的相關(guān)資料，激活了所有接口支持瀏覽器跨域請(qǐng)求的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07