您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 菜单导航 >

    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>

    jQuery制作的底部弹出缩略图导航菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/caidan/10127.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!
    标签:网站源码