www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/038/default/core/js/main.js
/* Copyright (c) 2011 Ernesto Mendez <der-design.com> */ var html, body; (function() { var nav, navSection, navSearch, wrap, navSearchActive = false; $(document).ready(function() { html = $('html'), body = $('body'), wrap = $('#wrap'); ui_enhance(); ui_events(); ui_scrollable(); ui_lightbox(); ui_shortcodes(); ui_syntax_highlight(); Rising.load(); }); function ui_enhance() { wrap = $('#wrap'); nav = $('nav[role=navigation] ul'); navSection = nav.parents('section'); // Nav Stripes nav.find('> li > ul > li:even').addClass('alt'); // Nav Hover nav.find('> li').hover(function() { $(this).find('ul:first').css({visibility: 'visible',display: 'none'}).fadeIn(300,'easeOutSine'); }, function() { $(this).find('ul:first').css({visibility: 'hidden'}); }); // Nav Home/Search Hover navSection.find('> a.button').each(function() { this.data = this.data || {}; this.data.self = $(this); this.data.span = this.data.self.find('span'); this.data.isSearch = this.data.self.hasClass('search'); }).hover(function(e) { with (this.data) { if ( isSearch && navSearchActive ) return; switch (e.type) { case 'mouseenter': span.stop().animate({opacity: 1}, 400); break; case 'mouseleave': span.stop().animate({opacity: 0}, 150); break; } } }); if ( Rising.ie.is(8) ) $('#nav-wrap a.button').trigger('mouseleave'); // Hide plus buttons, excluding special portfolio layout $('.frame .plus, .frame .overlay-desc').not('.column-grid.special .frame .plus').addClass('hide'); // Suppress last-child margin $('\ .content > *:last-child:not(a), .excerpt > *:last-child:not(a), \ ul.sc-tabs > li.tab > *:last-child:not(a), \ .column-4 > *:last-child:not(a), \ .column-3 > *:last-child:not(a), \ .column-2 > *:last-child:not(a) \ ').css({marginBottom: 0}); // Hover effect for Latest Work Entries if ( html.hasClass('opacity') ) { $('a.special-hover').each(function() { this.data = { self: $(this), span: null }; with (this.data) { self.append('<span class="hover"></span>'); span = self.find('span.hover').css('visibility','visible'); span.width(span.width()-8).height(span.height()-8); self.hover(function(e) { switch (e.type) { case 'mouseenter': span.stop().animate({opacity: 1}, 200); break; case 'mouseleave': span.stop().animate({opacity: 0}, 180); break; } }); } }); } // Hover effect for Social Icons $('footer ul.social-icons li a').each(function() { this.data = {self: $(this)}; }).hover(function(e) { with (this.data) { switch (e.type) { case 'mouseenter': self.stop().animate({opacity: 1}, 180); break; case 'mouseleave': self.stop().animate({opacity: 0.51},180); break; } } }); if ( Rising.ie.is(8) ) $('footer ul.social-icons li a').trigger('mouseleave'); // Color Change Animation function function colorChange(e) { if ( ! this.data.hasText ) return; with (this.data) { switch (e.type) { case 'mouseenter': self.stop().animate({color: toColor}, timers[0]); break; case 'mouseleave': self.stop().animate({color: origColor}, timers[1]); break; } } } // Homepage Posts & Blog Posts color animations $('#home section.modular h2.post-title a, #portfolio h2.post-title a, .post .post-meta h1 a, #secondary .widget a').each(function() { this.data = {}; this.data.self = $(this); this.data.origColor = this.data.self.css('color'); this.data.hasText = this.data.self.text().length > 0; this.data.toColor = Rising.colors.postTitleHover; this.data.timers = [180, 180]; }).hover(colorChange); // Footer links color animations $('footer[role=contentinfo] a').each(function() { this.data = {}; this.data.self = $(this); this.data.origColor = this.data.self.css('color'); this.data.hasText = this.data.self.text().length > 0; this.data.toColor = Rising.colors.footerLinkHover; this.data.timers = [180, 180]; }).hover(colorChange); // Image Frame Animations $('.frame:not(.transparent), .widget.widget_flickr .flickr_badge_image img').each(function() { this.data = {}; this.data.self = $(this); this.data.c = Rising.colors.frameHover; this.data.bc = this.data.self.css('borderLeftColor'); this.data.plus = this.data.self.find('.plus.hide'); this.data.overlay = this.data.self.find('span.overlay'); this.data.desc = this.data.self.find('.overlay-desc.hide'); if ( this.data.desc.length ) { this.data.desc.css('bottom', -(this.data.desc.height())-13+'px'); } this.data.frameHover = ! this.data.self.hasClass('nohover'); this.data.t1 = 400; this.data.t2 = 200; }).hover(function(e) { with (this.data) { var isMobile480 = Rising.isMobile480(); switch (e.type) { case 'mouseenter': if ( plus.length && ! isMobile480 ) plus.stop().animate({right: 0}, t1, 'easeOutExpo'); // Plus button if ( desc.length && ! isMobile480 ) desc.stop().animate({bottom: '0'}, t1, 'easeOutExpo'); // Overlay Description if ( html.hasClass('opacity') && overlay.length ) overlay.stop().animate({opacity: 1}, t1); // Color Overlay if ( frameHover ) self.stop().animate({borderTopColor:c, borderRightColor:c, borderBottomColor:c, borderLeftColor:c}, t2); // Frame Color break; case 'mouseleave': if ( plus.length && ! isMobile480 ) plus.stop().animate({right: '-32px'}, t1, 'easeOutExpo'); // Plus Button if ( desc.length && ! isMobile480 ) desc.stop().animate({bottom: -(desc.height()+13)+'px'}, t1, 'easeOutExpo'); // Overlay Description if ( html.hasClass('opacity') && overlay.length ) overlay.stop().animate({opacity: 0}, t1); // Color Overlay if ( frameHover ) self.stop().animate({borderTopColor:bc, borderRightColor:bc, borderBottomColor:bc, borderLeftColor:bc}, t2); // Frame Color break; } } }); // Pagination Effect $('section#pagination a').each(function() { this.data = {}; this.data.self = $(this); this.data.which = $(this).attr('class'); this.data.paramsIn = { prev: {marginLeft: '3px'}, next: {marginRight: '3px'} }; this.data.paramsOut = { prev: {marginLeft: '0'}, next: {marginRight: '0'} }; }).hover(function(e) { with (this.data) { switch (e.type) { case 'mouseenter': self.stop().animate(paramsIn[which], 120); break; case 'mouseleave': self.stop().animate(paramsOut[which], 120); break; } } }); // Portfoio Layout Animations (special) $('#portfolio .column-grid.special').each(function() { var self = $(this); self.wrap('<div class="wrapper"></div>'); self.parent().height( self.height() ); self.addClass('absolute'); }); $('#portfolio .column-grid.special ul.column li.entry').each(function() { this.data = {}; this.data.self = $(this); this.data.frame = this.data.self.find('> .frame'); this.data.content = this.data.self.find('> .content'); this.data.plus = this.data.self.find('> .frame .plus'); this.data.frameHeight = this.data.frame.height() + 8; this.data.contentHeight = this.data.content.height(); this.data.nextEntry = this.data.self.next('li.entry'); this.data.vOffset = this.data.nextEntry.length ? parseInt(this.data.nextEntry.css('marginTop')) : 0; this.data.content.css({height: 0}); }).hover(function(e) { if ( ! Rising.isDesktop() ) return; // Effect only available on Desktop var t = 250; with(this.data) { switch (e.type) { case 'mouseenter': content.stop().animate({height: contentHeight+'px'}, t, 'easeOutExpo'); plus.stop().animate({bottom: -contentHeight}, t, 'easeOutExpo'); if ( nextEntry.length ) nextEntry.stop().animate({marginTop: contentHeight+vOffset+'px'}, t, 'easeOutExpo'); break; case 'mouseleave': content.stop().animate({height: 0}, t, 'easeOutExpo'); plus.stop().animate({bottom: 0}, t, 'easeOutExpo'); if ( nextEntry.length ) nextEntry.stop().animate({marginTop: 0+vOffset+'px'}, t, 'easeOutExpo'); break; } } }); $('#portfolio .column-grid.special ul.column li.entry .content').each(function() { var frame = $(this).prev('.frame'); this.data = frame.get(0).data; }).hover(function(e) { with (this.data) { switch (e.type) { case 'mouseenter': if ( html.hasClass('opacity') && overlay.length ) overlay.stop().animate({opacity: 1}, t1); // Color Overlay if ( frameHover ) self.stop().animate({borderTopColor:c, borderRightColor:c, borderBottomColor:c, borderLeftColor:c}, t2); // Frame Color break; case 'mouseleave': if ( html.hasClass('opacity') && overlay.length ) overlay.stop().animate({opacity: 0}, t1); // Color Overlay if ( frameHover ) self.stop().animate({borderTopColor:bc, borderRightColor:bc, borderBottomColor:bc, borderLeftColor:bc}, t2); // Frame Color break; } } }); // Post Image hover animations $('.opacity .post > header .post-img span.overlay').each(function() { this.data = {}; this.data.self = $(this); }).hover(function(e) { with (this.data) { switch (e.type) { case 'mouseenter': self.stop().animate({opacity: 1}, 250); break; case 'mouseleave': self.stop().animate({opacity: 0}, 250) break; } } }); // Comment Animations & Effects $('.opacity ol.commentlist li .reply a.comment-reply-link').each(function() { this.data = {}; this.data.self = $(this); this.data.opacity = parseFloat(this.data.self.css('opacity')); this.data.fgColor = this.data.self.css('color'); }).hover(function(e) { with (this.data) { switch (e.type) { case 'mouseenter': self.stop().animate({opacity: 1, color: '#eb5426'}, 200); break; case 'mouseleave': self.stop().animate({opacity: opacity, color: fgColor}); break; } } }); } function ui_events() { navSearch = navSection.find('form'); var navSearchBusy = false, navSearchButton = navSection.find('> a.button.search'), navSearchInput = navSearch.find('input:text'); // Nav Search Show navSearchButton.click(function() { if ( navSearchActive ) return else { navSearchActive = true; navSearch.css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 190, function() { navSearchBusy = false; }); } }); // Nav Search Hide navSearch.find('span.close').click(function() { if ( navSearchBusy ) return else { navSearchBusy = true; navSearchButton.find('span').animate({opacity: 0}, 190); navSearch.animate({opacity: 0}, 190, function() { navSearch.css('visibility', 'hidden'); navSearchBusy = navSearchActive = false; }); } }); // Nav Search Input focus/blur navSearchInput.each(function() { this.data = {}; this.data.self = $(this); this.data.label = this.data.self.val(); }).focus(function() { with (this.data) { if ( self.val() == label ) self.val(''); } }).blur(function() { with (this.data) { if ( $.trim(self.val()) == '' ) self.val(label); } }); // Dismiss Button $('span[data-action=dismiss]').each(function() { this.data = {}; this.data.self = $(this); this.data.parent = this.data.self.parent(); }).live('click', function() { with (this.data) { if ( html.hasClass('opacity') ) parent.stop().animate({opacity: 0}, 250, function() { setTimeout(function() { parent.remove(); }, 0); }); else parent.remove(); } }); // Add form.special data (required for validation) $('form.special input, form.special textarea').each(function() { this.data = {}; this.data.self = $(this); var val = this.data.self.val(); this.data.label = (val && val.length) ? val : null; this.data.required = this.data.self.attr('aria-required') == 'true'; }); // Use HTML5 Native Form Inputs on browsers that support them if ( Rising.isAppleDevice() || $.browser.safari ) { // Add browser tests here var formSpecial = $('form.special, form[role=search]'); formSpecial.find('input:text').each(function() { this.data.self.attr('placeholder', this.data.self.attr('value')).attr('value', '').focus().blur(); }); } else { // Special form focus & blur $('form.special input, form.special textarea').focus(function() { with (this.data) { console.log('focusing'); if ( label && self.val() == label) self.val(''); else return; } }).blur(function() { with (this.data) { if ( label && self.val().length == 0 ) self.val(label) else return; } }); } } function ui_scrollable() { $('section.scrollable').each(function() { var self = $(this), articles = self.find('> .scroller > .column-grid > .entry'); if ( articles.length == 0 ) return; var grid = self.find('> .scroller > .column-grid'), columns = parseInt(grid.attr('class').match(/cols-\d/)[0].replace('cols-','')), pages = Math.ceil(articles.length / columns); if ( pages == 1 ) return; var controls = self.find('> ul.common-scroller-controls'), scroller = self.find('> .scroller'); // Create controls var i, html = ''; for (var i=0; i < pages; i++) { html += _.sprintf('<li rel="%d"></li>', i); } controls.append(html); controls.find('> li:first-child').addClass('active'); // Controls click event var busy = false; controls.find('li').each(function() { this.data = {}; this.data.self = $(this); this.data.rel = parseInt(this.data.self.attr('rel')); this.data.offset = 21; }).click(function(e) { with (this.data) { if ( self.hasClass('active') ) return; if ( busy ) return; else busy = true; self.addClass('active').siblings('.active').removeClass('active'); grid.stop().animate({marginLeft: -(rel*wrap.width())-(rel*offset)+'px'}, 750, 'easeInOutExpo', function() { busy = false; }); } }); }); } function ui_lightbox() { /* Fancybox API: http://fancybox.net/api Video URL formats for href's: - Youtube: http://www.youtube.com/v/{VIDEO-ID} - Vimeo: http://vimeo.com/moogaloop.swf?clip_id={VIDEO-ID} HTML Element attribute triggers for lightbox: - Video: data-lightbox="video" - Images: data-lightbox="image" */ var imgOptions = { speedIn: 470, titleShow: false, transitionIn: 'elastic', easingIn: 'easeInOutExpo', overlayColor: Rising.colors.lightboxBg, overlayOpacity: 0.8, speedOut: 150, transitionOut: 'fade' } var swfOptions = { speedIn: 400, titleShow: false, transitionIn: 'elastic', easingIn: 'easeOutQuad', speedOut: 0, transitionOut: 'none', overlayColor: Rising.colors.lightboxBg, overlayOpacity: 0.8, width: 800, height: 460, type: 'swf', swf: {'allowfullscreen':'true'} } $("a[data-lightbox^='image']").fancybox(imgOptions); $("a[data-lightbox^='video']").fancybox(swfOptions); } function ui_syntax_highlight() { /* SHJS Api: http://shjs.sourceforge.net/ */ var theme; switch (Rising.theme) { case 'default': theme = 'ide-devcpp'; break; case 'dark': theme = 'darkblue'; break; } var classes = ['core/js/libs/sh_main.min.js'], shRegex = /^sh_(.*?)/; $('.post pre').each(function() { var self = $(this), _class = self.attr('class'); if ( shRegex.test(_class) ) { classes.push('http://shjs.sourceforge.net/lang/'+_class+'.min.js'); } }); classes = _.uniq(classes); if ( classes.length == 1 ) return else { $('head').append(_.sprintf('<link rel="stylesheet" href="http://shjs.sourceforge.net/css/sh_%s.min.css" />', theme)); classes.push(function() { sh_highlightDocument(); }); head.js.apply(window, classes); } $('.post pre').css('backgroundColor', Rising.colors.sourceCodeBg); } function ui_shortcodes() { $('ul.sc-tabs').each(function() { var self = $(this), tabs = self.find('> li.tab'), nav = $('<li class="nav clearfix"></li>'); tabs.each(function(i) { var title = $(this).attr('rel', i).prev('li.title'); nav.append(_.sprintf('<span rel="%d">%s</span>', i, title.text())); title.remove(); }); nav.find(':first').addClass('active'); nav.prependTo(self); }).find('li.nav > span').each(function() { this.data = {}; this.data.self = $(this); this.data.rel = parseInt(this.data.self.attr('rel')); }).click(function() { with (this.data) { self.addClass('active').siblings('span').removeClass('active'); self.parent().siblings('li.tab[rel='+rel+']').show().siblings('li.tab').hide(); } }); } })(jQuery);