最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery滑动门代码鼠标悬停竖直手风琴滑动门切换

来源:http://www.erdangjiade.com/js/1158.html 二当家的 2017-02-18 16:46浏览(790)

jquery滑动门代码鼠标悬停竖直手风琴滑动门切换效果实现源码

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery滑动门代码鼠标悬停竖直手风琴滑动门切换
查看演示 下载资源: 14

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<ul id="accoradion01" class="accoradion">
		<li><a href="#">jquery 特效</a>
			<ul>
				<li>
					<h3><a href="http://www.erdangjiade.com/" target="_blank">jquery多窗口轮播焦点图片滚动切换</a></h3>
					<p>jquery焦点图特效制作影视网站多窗口焦点图片轮播滚动播放,点击索引按钮每个焦点图窗口图片相应的滚动切换。多个窗口图片滚动组成的轮播焦点图片切换。</p>
				</li>
			</ul>
		</li>
		<li><a href="#">js特效</a>
			<ul>
				<li>
					<h3><a href="http://www.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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);
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1158.html
评论4
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 3楼
    12-05 09:19
    qqlixiangabc
    特效不错啊啊 。。。。
  • 头像 板凳
    02-20 09:32
    a1015703929
    简单使用
  • 头像 椅子
    02-20 09:23
    lzw0411
    标悬停竖直手风琴滑动
  • 头像 沙发
    02-20 09:15
    lzw0411
    滑动门代码鼠标悬停竖直
1 2