当前位置:首页 > 网页特效 > 菜单导航 >

jQuery制作的底部弹出缩略图导航菜单

时间:2014-08-26 08:50 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

jQuery底部弹出缩略图导航菜单,点击底部菜单栏文字会弹出一列缩略图,点击缩略图跳转到对应链接。jquery缩略图底部弹出导航菜单

<script type="text/javascript">
    $(function(){
        /* function to make the thumbs menu scrollable */
        function buildThumbs($elem){
            var $wrapper     = $elem.next();
            var $menu = $wrapper.find('.sc_menu');
            var inactiveMargin = 150;
            /* move the scroll down to the
            beggining (move as much as the height of the menu) */
            $wrapper.scrollTop($menu.outerHeight());
            
            /* when moving the mouse up or down, the wrapper moves (scrolls) up or down */
            $wrapper.bind('mousemove',function(e){
                var wrapperHeight = $wrapper.height();
                var menuHeight = $menu.outerHeight() + 2 * inactiveMargin;
                var top = (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
                $wrapper.scrollTop(top+10);
            });
        }
        
        var stacktime;
        
        $('#menu li > a').bind('mouseover',function () {
            var $this = $(this);
            
            buildThumbs($this);
            
            var pos = $this.next().find('a').size();
            var f = function(){
                if(pos==0) clearTimeout(stacktime);
                $this.next().find('a:nth-child('+pos+')').css('visibility','visible');
                --pos;
            };
            /* each thumb will appear with a delay */
            stacktime = setInterval(f , 50);
        });
        
        /* on mouseleave of the whole <li> the scrollable area is hidden */
        $('#menu li').bind('mouseleave',function () {
            var $this = $(this);
            clearTimeout(stacktime);
            $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
            $this.find('.sc_menu_wrapper').css('visibility','hidden');
        });
        
        /* when hovering a thumb, change its opacity */
        $('.sc_menu a').hover(
        function () {
            var $this = $(this);
            $this.find('img')
            .stop()
            .animate({'opacity':'1.0'},400);
        },
        function () {
            var $this = $(this);
            $this.find('img')
            .stop()
            .animate({'opacity':'0.3'},400);
        }
    );
    });
</script>

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

菜单导航下载排行

最新文章