最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/js/1158.html 沐浴春风 2017-02-18 16:46浏览(894)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jquery滑动门代码鼠标悬停竖直手风琴滑动门切换
查看演示 下载资源 下载积分: 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
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

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