以下是 jQuery图片渐隐切换菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQuery图片渐隐切换菜</title>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#ei_menu > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems = $menuItems.length,
ExpandingMenu = (function(){
/*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
*/
var current = 2,
/*
@anim
if we want the default opened item to animate initialy set this to true
*/
anim = false,
/*
checks if the current value is valid -
between 0 and the number of items
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not just show it */
$item.css({width : '400px'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/* decrease the opacity of the others */
$menuItems.not($item)
.children('.ei_preview')
.css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem = function(idx) {
$menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),
itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};
/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
.stop()
.animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);
/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});
</script>
<body>
<h1 class="title_name">Image Fade Switch Menu with <span>CSS & jQuery</span><small>by Sunflowa Media</small></h1>
<div id="content_wrapper">
<div id="example">
<div id="ei_menu" class="ei_menu">
<ul>
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>USOPP</h2>
<h3>B30,000,00</h3>
<p>Usopp (ウソップ, Usoppu), nicknamed "King of Snipers Sogeking" (狙撃の王様, Sogeki no Ō-sama, renamed "Sniper King" in the Viz Media manga translation), is the crew's 19 year old marksman.</p>
</div>
</li>
<li>
<a href="#" class="pos2">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>ZORO</h2>
<h3>B120,000,000</h3>
<p>Roronoa Zoro (ロロノア・ゾロ, spelled as "Roronoa Zolo" in some English adaptations), named after François l'Olonnais,ch.28 nicknamed "Pirate Hunter" Zoro (海賊狩りのゾロ, Kaizoku-Gari no Zoro, spelled as "Pirate Hunter" Zolo in some English adaptations)[citation needed], is a 21 year old, skilled swordsman who uses up to three swords at once, clutching the third in his mouth.</p>
</div>
</li>
<li>
<a href="#" class="pos3">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>LUFFY</h2>
<h3>B400,000,000</h3>
<p>Monkey D. Luffy (モンキー・D・ルフィ, Monkī Dī Rufi), nicknamed "Straw Hat" Luffy (麦わらのルフィ, Mugiwara no Rufi), is the 19 year-old captain of The Straw Hat Pirates and the main protagonist of the franchise.</p>
</div>
</li>
<li>
<a href="#" class="pos4">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>NAMI</h2>
<h3>B16,000,000</h3>
<p>Nami (ナミ), nicknamed "Cat Burglar" Nami (泥棒猫のナミ, Dorobō Neko no Nami, renamed Nami the "Navigator" in the 4Kids anime), is the crew's 20 year oldch.27 navigator and thief.FROM 13141618.taobao.com</p>
</div>
</li>
<li>
<a href="#" class="pos5">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>SANJI</h2>
<h3>B77,000,000</h3>
<p>Sanji (サンジ), nicknamed "Black Leg" Sanji (黒脚のサンジ, Kuro Ashi no Sanji)ch.435, is the crew's 21-year-oldch.55 chef.</p>
</div>
</li>
</ul>
</div>
</div>
<!-- END Tabs (Example) -->
</div>
</body>
</html>
CSS代码(index.css):
/*Theme Name:Airos ChouTheme URI:http://www.sunflowamedia.comDescription:Web Design examples*/
body{font-family:"Trebuchet MS",sans-serif;font-size:14px;background:#212121;color:#fff;}
img{border:0;}
h1.title_name{font-family:"Trebuchet MS","Myriad Pro",Arial,sans-serif;font-weight:normal;font-size:4em;margin:0;padding:50px 0 20px 0;text-align:center;text-shadow:1px 1px 1px #000;}
h1.title_name span{font-family:normal Georgia,'Times New Roman',Times,serif;color:#FE4902;font-size:0.9em;}
h1.title_name small{display:block;font-family:normal Verdana,Arial,Helvetica,sans-serif;font-size:0.3em;font-weight:bold;letter-spacing:0.5em;text-transform:uppercase;color:#AAA;}
p.copy_right{width:750px;margin:0 auto;padding:50px 0;clear:both;font-size:1.1em;letter-spacing:1px;text-align:center;overflow:hidden;font-weight:bold;}
p.copy_right a{color:#FE4902;text-shadow:none;}
p.copy_right a:hover{text-decoration:none;}
#example{width:950px;margin:50px auto;}
/* Menu style */
.ei_menu{background:#111;width:100%;overflow:hidden;}
.ei_menu ul{height:350px;margin:0;padding:0;position:relative;display:block;}
.ei_menu ul li{width:75px;height:350px;float:left;position:relative;overflow:hidden;border-right:2px solid #111;}
.ei_preview{width:75px;height:350px;cursor:pointer;position:absolute;top:0px;left:0px;background:url(../images/bw.jpg) no-repeat top left;}
.ei_image{width:75px;height:350px;position:absolute;left:75px;top:0px;opacity:0.2;background:url(../images/color.jpg) no-repeat top left;}
.pos1 span{background-position:0px 0px;}
.pos2 span{background-position:-75px 0px;}
.pos3 span{background-position:-152px 0px;}
.pos4 span{background-position:-227px 0px;}
.pos5 span{background-position:-302px 0px;}
.pos6 span{background-position:-377px 0px;}
.ei_descr{position:absolute;width:278px;height:310px;border-right:7px solid #f0f0f0;padding:20px;left:75px;top:0px;background:#fff;}
.ei_descr h2{font-family:'Rock Salt',arial,serif;font-size:26px;color:#555;text-shadow:0px 0px 1px #fff;background:#fff url(../images/stripe_light.gif) repeat top left;margin:0;padding:0;}
.ei_descr h3{font-family:'Raleway',arial,serif;font-size:1.5em;color:#fff;text-shadow:0px 0px 1px #000;font-style:normal;margin:0;padding:10px;background:#333;}
.ei_descr p{color:#000;padding:10px 5px 0px 5px;margin:0;line-height:18px;font-size:12px;font-family:Arial;text-transform:uppercase;}
/* For the index_3 demo */
ul.trigger_list{position:absolute;right:20px;top:145px;}
ul.trigger_list li{float:left;line-height:53px;color:#ddd;font-style:italic;}
ul.trigger_list li a{font-family:'Rock Salt',arial,serif;display:block;background:#000;color:#ddd;line-height:35px;padding:5px 10px;margin:3px;border-radius:5px 5px 5px 5px;text-shadow:1px 1px 1px #000;}
ul.trigger_list li a:hover{background:#222;color:#fff;}
分享到QQ
分享到微博
微信扫一扫
