jquery滑动门代码鼠标悬停竖直手风琴滑动门切换效果实现源码
淘建站为您提供更多_图片代码_图片滑动_滑动_切换，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 500 次
下载资源
45 积分
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
<ul id="accoradion01" class="accoradion">
<li><a href="#">jquery 特效</a>
<ul>
<li>
<h3><a href="http://www.sucaiq.com/" target="_blank">jquery多窗口轮播焦点图片滚动切换</a></h3>
<p>jquery焦点图特效制作影视网站多窗口焦点图片轮播滚动播放，点击索引按钮每个焦点图窗口图片相应的滚动切换。多个窗口图片滚动组成的轮播焦点图片切换。</p>
</li>
</ul>
</li>
<li><a href="#">js特效</a>
<ul>
<li>
<h3><a href="http://www.sucaiq.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></h3>
<p>js文字特效制作js文字切换效果让焦点文字带滤镜效果切换滚动，内含js代码下载。</p>
</li>
</ul>
</li>
<li><a href="#">flash特效</a>
<ul>
<li>
<h3><a href="http://www.sucaiq.com/" target="_blank">flash图片切换左右滚动带序列索引按钮控制flash动画图片特效</a></h3>
<p>flash动画图片滚动特效带序列按钮对应索引图片切换左右滚动支持xml文件外调、图片外调等功能。</p>
</li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li>
<h3><a href="http://www.sucaiq.com/" target="_blank">div+css布局控制div定位浮动层在背景图片上的半透明阴影效果</a></h3>
<p>div+css布局应用div定位浮动层控制在背景图片上，以半透明阴影效果显示，div内容列表排行序列显示。div css模板和div css教程下载。</p>
</li>
</ul>
</li>
<li><a href="#">html5教程</a>
<ul>
<li>
<h3><a href="http://www.sucaiq.com/" target="_blank">制作CSS3和HTML5的一个单页网站模板</a></h3>
<p>在这里，我们使用的是新版本的HTML- 该网站的基本语言，使Web模板，利用所带来的CSS3和jQuery的一些新功能的scrollTo插件。</p>
</li>
</ul>
</li>
</ul>(function($) {
$.fn.hoverAccordion = function(options) {
// Setup options
options = jQuery.extend({
// Speed at which the subitems open up - valid options are: slow,
// normal, fast, or integer for duration in milliseconds
speed : 'fast',
// true: Automatically activate items with links corresponding to
// the current page, 2: Activate item #2 (numbering starts with 1!)
activateItem : true,
// true: Set the height of each accordion item to the size of the
// largest one, false: Leave height as is
keepHeight : false,
// true: Handle accordion on click only rather than hovering, false:
// React to hovering
onClickOnly : false,
// Class name of the initially active element
classActive : 'active',
// Class name for header items
classHeader : 'header',
// Class name for hover effect
classHover : 'hover',
// Class name for open header items
classOpen : 'opened',
// Class name for closed header items
classClosed : 'closed'
}, options);
// Current hover status
var container = this;
// Current URL
var pageHref = window.location.href;
// Interval for detecting intended element activation
var i = 0;
// Change display status of subitems when hovering
function doHover(itemList, itemHeader, listHeight) {
// Change only one display status at a time
var oldList = $(container).find('.' + options.classOpen).closest(
'li').find('ul:first');
if (false === oldList.is(':animated')) {
if (options.keepHeight == true) {
listHeight = maxHeight;
}
// Change display status if not already open
if (itemHeader.hasClass(options.classOpen) == false) {
itemList.children().show();
itemList.animate({
height : listHeight
}, {
step : function(n, fx) {
itemList.height(listHeight - n);
},
duration : options.speed
});
oldList.animate({
height : 0
}, {
step : function(n, fx) {
itemList.height(listHeight - n);
},
duration : options.speed
}).children().hide();
// Switch classes for headers
itemHeader.addClass(options.classOpen).removeClass(
options.classClosed);
oldList.closest('li').removeClass(options.classActive)
.find('a:first').addClass(options.classClosed).removeClass(
options.classOpen);
}
}
}
var itemNo = 0;
var maxHeight = 0;
// Setup initial state and hover events
$(this)
.children('li')
.each(
function() {
var item = $(this);
var isActive = false;
itemNo++;
var itemHeader = item.find('a:first').addClass(options.classHeader);
if (itemHeader.length > 0) {
// Hover effect for all links
itemHeader.hover(function() {
itemHeader.addClass(options.classHover);
}, function() {
itemHeader.removeClass(options.classHover);
});
var itemHref = itemHeader.attr('href');
if (itemHref == '#') {
// Add a click event if the header does not contain a link
itemHeader.click(function() {
this.blur();
return false;
});
} else if (options.activateItem == true
&& pageHref.indexOf(itemHref) > 0
&& pageHref.length - pageHref.lastIndexOf(itemHref) == itemHref.length) {
isActive = true;
item.addClass(options.classActive);
itemHeader.removeClass(options.classClosed).addClass(
options.classOpen);
}
}
var itemList = item.find('ul:first');
// Initialize subitems
if (itemList.length > 0) {
var listHeight = itemList.height();
if (maxHeight < listHeight)
maxHeight = listHeight;
if (options.onClickOnly == true) {
itemHeader.click(function() {
doHover(itemList, itemHeader, listHeight);
});
} else {
// Bind hover events to all headers of sublists
itemHeader.hover(function() {
i = setInterval(function() {
doHover(itemList, itemHeader, listHeight);
clearInterval(i);
}, 400);
}, function() {
clearInterval(i);
});
}
// Set current link to current URL to 'active'
if (options.activateItem == true) {
itemList
.children('li')
.each(
function() {
var m = $(this).find('a').attr('href');
if (m) {
if (pageHref.indexOf(m) > 0
&& pageHref.length - pageHref.lastIndexOf(m) == m.length) {
isActive = true;
item.addClass(options.classActive);
itemHeader.removeClass(options.classClosed)
.addClass(options.classOpen);
}
}
});
} else if (parseInt(options.activateItem, 10) == itemNo) {
isActive = true;
item.addClass(options.classActive);
itemHeader.removeClass(options.classClosed).addClass(
options.classOpen);
}
}
// Close all subitems except for those with active items
if (!isActive) {
itemHeader.removeClass(options.classOpen);
if (itemList.length > 0) {
itemList.children().hide();
itemHeader.addClass(options.classClosed);
}
}
});
return this;
};
})(jQuery);
