您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery相册代码特效 > 正文

jQuery图像菜单特效

2015-09-24 11:09:46 作者:天外飞仙 人气:299 Views

jQuery图像菜单特效
20150922230201
引入js代码

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.5.1/jquery.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 = -1, /* @anim if we want the default opened item to animate initialy set this to true */ anim = true, /* 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>

下载地址
预览地址

链接:http://www.jqueryba.com/5731.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!