js圖片卷簾門導航菜單特效代碼分享
編輯：關於JavaScript
本文實例講述了jQuery超精致圖片輪播幻燈片特效。分享給大家供大家參考。具體如下：
這是一款基於js實現圖片卷簾門導航菜單特效代碼，與以往的導航菜單相比，更具有創新性，不止是簡單的向用戶展示信息，而是更加豐富網站的整體內容。
運行效果圖：-------------------查看效果 下載源碼-------------------
小提示：浏覽器中如果不能正常運行，可以嘗試切換浏覽模式。
在head區域引入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.jb51.net/" target="_blank">Link 1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="http://www.jb51.net/" target="_blank">Link 2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="http://www.jb51.net/" target="_blank">Link 3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="http://www.jb51.net/" target="_blank">Link 4</a></li>
</ul>
</div>
</body>
</html>
以上就是為大家分享的js圖片卷簾門導航菜單特效代碼代碼，希望大家可以喜歡，並應用到實踐中。
小編推薦
熱門推薦