相思资源网 Design By www.200059.com
演示图:
代码:
$(document).ready(function() { greyInitRedux(); ieDropdownsNav(); ieDropdownsFilter(); itemViewer(); jsTabsetInit(); slider(); headerTabs(); carousel(); emergencyClose(); replyLinks(); adjournLinks(); zebra_strip_rows(); visitor_site_slideshow(); }); var carousel_round = 0; /*------------------------------------------- Grey Initial Values -------------------------------------------*/ function greyInitRedux() { $("input.filled, textarea.filled").focus(function(e){ if(this.value == this.defaultValue) { $(this).removeClass('filled'); this.value= ''; } $(this).blur(function(f){ if(this.value == this.defaultValue) { $(this).addClass('filled'); } else if(this.value == "") { this.value = this.defaultValue; $(this).addClass('filled'); } }); }) } /*------------------------------------------- IE6 CSS Main Nav Dropdowns -------------------------------------------*/ function ieDropdownsNav() { if(document.all&&document.getElementById) { navRoot = document.getElementById('main-nav'); if (!navRoot) { return false; } for(i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=='LI') { node.onmouseover=function() { this.className+=' over'; } node.onmouseout=function() { this.className=this.className.replace(' over', ''); } } } } } /*------------------------------------------- IE6 CSS Main Nav Dropdowns -------------------------------------------*/ function ieDropdownsFilter() { if(document.all&&document.getElementById) { navRoot = document.getElementById('filter-drop'); if (!navRoot) { return false; } for(i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=='DIV') { node.onmouseover=function() { this.className+=' over'; } node.onmouseout=function() { this.className=this.className.replace(' over', ''); } } } } } /*------------------------------------------- View More -------------------------------------------*/ function itemViewer() { //$(document).delegate('#filter-drop a, .expandable > .load, .filter-nav a', 'click', function (e) //$(document).delegate('.expandable > .load, .filter-nav a', 'click', function (e) $(document).delegate('.filter-nav a', 'click', function (e) { // get the src for the content we're trying to view var dataSrc = $(this).attr('data-src'); // determine whether we're trying to sort the existing view if($(this).attr('data-sort')) { var dataSort = $(this).attr('data-sort'); } else { var dataSort = $('.filter-nav > li > a').attr('data-sort'); } // how many items do we have"filter")) { var hiddenDiv = $('<div />', { "class": "items hidden spacer", "height": $('.expandable').outerHeight() }); $('.expandable > .load').before(hiddenDiv); $('.expandable > ul, .expandable > div:not(.spacer)').remove(); $('.load').attr('data-src',dataSrc); // Change Class of Dropdown Toggle var clickedClass = $(this).parent().attr('class'); $("#filter-drop strong").removeClass().addClass(clickedClass); // Change Text of Dropdown Toggle var thisLabel = $(this).text(); $("#filter-drop strong span").text(thisLabel); // Grab datasrc from clicked-on menu item and populate the filters with it $('.filter-nav a').attr('data-src' , dataSrc); $('.filter-nav li').removeClass('active'); $('.filter-nav > li').eq(0).addClass('active'); } //find out if we clicked the filter nav, if so let's switch the active class if($(this).closest('ul').hasClass("filter-nav")) { $('.filter-nav li').removeClass('active'); $(this).parent().addClass('active'); //Also let's remove all the items before replacing them with what we want var hiddenDiv = $('<div />', { "class": "items hidden spacer", "height": $('.expandable').outerHeight() }); $('.expandable > .load').before(hiddenDiv); $('.expandable > ul, .expandable > div:not(.spacer)').remove(); } $.get(dataSrc, { offset: itemOffset, sort: dataSort }, function(data) { $('.expandable .spacer').remove(); var hiddenDiv = $('<div class="items hidden"></div>'); $('.expandable > .load').before(hiddenDiv); $(hiddenDiv).append(data).hide().removeClass("hidden").fadeIn(); }); e.preventDefault(); }); } function jsTabsetInit() { var $tabset = $('.heading-tabset').eq(0); var $tablist = $('<ul />', {"class": "heading-tab"}); $tabset.prepend($tablist); $('div.heading-tab h3').each(function() { var $anchor = $('<a />', { "class": $(this).attr('class'), "onClick": '_gaq.push([\'_trackEvent\', \'Connect\', \'Click\', \'Head'+$(this).attr('class')+'\', 3]);', "href": "#", "html": $(this).html() }); var $li = $('<li />'); $li.append($anchor); $tablist.append($li); }); $('div.heading-tab').remove(); $('.heading-tabset:gt(0)').each(function() { $tabset.append($(this).find('.listing')); $(this).remove(); }); } function slider() { $('.slider').each(function() { // As we loop through the slider items we'll document the tallest one and the left position // of each element var maxHeight = 0, lastWidth = 0; // grab the slider and make sure the overflow is hidden and it has a defined width var $slider = $(this); $slider.css('width', $slider.outerWidth()); $slider.css('position', 'relative'); $slider.css('overflow', 'hidden'); // store the index (or the currently "selected" slide) $slider.prop('index', 0); // loop through each of the direct children $slider.find('> *').each(function() { // localize the child as a jQuery object var $li = $(this); // if this is the tallest child, document it if ($li.outerHeight() > maxHeight) { maxHeight = $li.outerHeight(); } // position each child to the immediate right of its preceding sibling $li.css('position', 'absolute'); $li.css('top', 0); $li.css('left', lastWidth); // update our maths so we know where to place the next sibling lastWidth+= $li.outerWidth(); }); // set the height of the slider based on the tallest child //$slider.css('height', maxHeight); // build the previous control button and store a reference to its related slider var $previous = $('<a />', {"class": "prev disabled", "href": "#", "text": "Previous"}); $previous.prop('slider', $slider); // build the next control button and store a reference to its related slider var $next = $('<a />', {"class": "next", "href": "#", "text": "Next"}); $next.prop('slider', $slider); // build the controls div and add it to the markup var $controls = $('<div />', {"class": "controls"}).append($previous).append($next); $slider.after($controls); $slider.prop('controls', $controls); }); // watch for clicks on the controls $(document).delegate('.listing + .controls .prev, .listing + .controls .next', 'click', function (event) { // stop our clicks from affecting the browser/url event.preventDefault(); // localize a jQuery version of the clicked link var $anchor = $(this); // grab the slider, that we previously stored while creating these links var $slider = $anchor.prop('slider'); // localize the index for prettier code var focusedIndex = $slider.prop('index'); // determine what slide is focused var $focus = $slider.find('> *').eq(focusedIndex); // grab the width of that focused slide var widthDelta = $focus.outerWidth(); // if we clicked the next button we're moving to the left (negative values, so // multiply by -1). if ($anchor.hasClass('next')) { widthDelta *= -1; } focusedIndex += ($anchor.hasClass('next')) "position": "absolute", "top": 0, "left": zeroPosition }); // setup the next slide to slide in, moving it above the focused slide and off screen $next.css({ "opacity": 0, "position": "absolute", "top": 0, "left": initialLeft, "z-index": 3 }); // animate the current slide out $focus.animate({ "opacity": 0, "left": targetLeft }, 800); // set up what we're animating var animation = { "opacity": 1, "left": zeroPosition } // horrible ie fix if ($.browser.msie && parseInt($.browser.version) <= 8) { delete animation.opacity; $focus.get(0).style.removeAttribute('filter'); $next.get(0).style.removeAttribute('filter'); } // animate in the next slide, then upon completion reset everything. switch it back to // relative positioning, remove our animation flag and hide the previous element $next.show().animate(animation, 800, function() { $focus.hide(); $(this).css({ "position": "relative", "left": 0 }); // fix msie if ($.browser.msie && parseInt($.browser.version) <= 8) { this.style.removeAttribute('filter'); } $carousel.prop('moving', false); }); // animate the height of our carousel, because things are abosulte the box model is shot $carousel.animate({ //"min-height": $next.outerHeight() }); // finally update our index to reflect the current view $carousel.prop('index', newIndex); }); $(document).delegate('.carousel .pause', 'click', function(event) { // prevent the default anchor action event.preventDefault(); // localize the carousel var $carousel = $(this).parents('.carousel'); // get the current timer, if it exists var timer = $carousel.prop('timer'); // no timer"index":index+1, "element":$slides.eq(index+1)}; } return {"index":0, "element":$slides.eq(0)}; } function previousSlide($carousel, index) { var $slides = $carousel.find('.carousel-item'); if (index-1 >= 0) { return {"index":index-1, "element":$slides.eq(index-1)}; } return {"index":$slides.size()-1, "element":$slides.eq(-1)}; } // build the controls for inclusion into the page var $previousBtn = $('<a />', {"class": "previous", "href": "#", "text": "Previous"}); var $playPauseBtn = $('<a />', {"class": "play pause", "href": "#", "text": "Play/Pause"}); var $nextBtn = $('<a />', {"class": "next", "href": "#", "text": "Next"}); var $controlsDiv = $('<div />', {"class": "carousel-controls"}); $controlsDiv.append($previousBtn); $controlsDiv.append($playPauseBtn); $controlsDiv.append($nextBtn); // loop through each carousel and set some default properties/styles $('.carousel').each(function() { // localize the carousel to this function var $carousel = $(this); // set the positioning and a default height, becuase we're going to be taken out of the // flow once our animation starts $carousel.css({ "position": "relative" //"min-height": $carousel.find('.carousel-item').eq(0).outerHeight() //N.C. commented out }); // store the currently visible slide's index $carousel.prop('index', 0); // hide subsequent slides $carousel.find('.carousel-item:gt(0)').hide(); // append in our controls $carousel.prepend($controlsDiv.clone(true)); // add the previous/next images $carousel.find('.main-image').each(function(index) { // get the previous image var $prevImage = $(previousSlide($carousel, index).element).find('.main-image').clone(); // remove the class $prevImage.removeClass('main-image'); // create a link for the previous image var $previousAnchor = $('<a />', { "href": "#", "class": "prev-image", "html": $prevImage }); $previousAnchor.css('opacity', 0.2); // add in the previous image/anchor $(this).before($previousAnchor); // get the next image var $nextImage = $(nextSlide($carousel, index).element).find('.main-image').clone(); // remove the class $nextImage.removeClass('main-image'); // create a link for the previous image var $nextAnchor = $('<a />', { "href": "#", "class": "next-image", "html": $nextImage }); $nextAnchor.css('opacity', 0.2); // add in the next image/anchor $(this).after($nextAnchor); }); // start the carousel by default start($carousel); }); } function emergencyClose() { //$('.emergency .wrap').append('<a href="#" class="close">Close</a>'); $(document).delegate('.emergency .close', 'click', function(event) { event.preventDefault(); $(this).parents('.emergency').remove(); }); } function replyLinks() { //$close = $('<a />', {"class": "close", "href": "#", "text": "Close"}); $twitterWrap = $('<div />', {"id": "twitter-wrap"}); //$twitterWrap.append($close); $twitter = $('<div />', {"id": "twitter"}); $twitterWrap.append($twitter); $(document.body).append($twitterWrap); /*twttr.anywhere(function (T) { T("#twitter").tweetBox({ "width": 515, "height": 133, "defaultContent": "", "onTweet": function() { $("#twitter-wrap").fadeOut('fast'); $('#overlay').fadeOut(); $('#overlay').remove(); _gaq.push(['trackEvent', 'Home', 'SubmitReply', 'TwitterReply', 5]); //$twitter.remove(); } }); });*/ $(document).delegate('.link-reply', 'click', function(event) { event.preventDefault(); //if ( !$('#overlay') ) { $(document.body).prepend($('<div />', {"id": "overlay"})); //} $('#overlay').fadeIn(); $("#twitter-wrap").css({ "position": "fixed", "top": 200, "left": ($(document.body).width()-515)/2 }); if ($.browser == 'msie') { $("#twitter-wrap").css({ "position": "absolute", "top": $(document.body).scrollTop() + 200 }); } $("#twitter-wrap").fadeIn('fast'); }); $(document).delegate('#overlay, #twitter-wrap .close', 'click', function(event) { event.preventDefault(); $('#twitter-wrap').fadeOut('fast'); $('#overlay').fadeOut('fast', function() { $(this).remove(); }) }); } function adjournLinks() { $('.adjoin-options').each(function() { var headings = []; $(this).find('*[data-heading]').each(function() { headings[$(this).attr('data-heading')] = $(this).attr('data-heading'); }); var $headings = $('<ul />', { "class": "adjoin-header" }); for (var heading in headings) { var $li = $('<li />'); var $a = $('<a />', { "href": "#", "onClick": '_gaq.push([\'_trackEvent\', \'SocialDirectory\', \'Click\', \'Head'+heading+'\', 3]);', "data-show": heading, "text": heading }) $li.append($a); $headings.append($li); } $(this).before($headings); }); $(document).delegate('a[data-show]', 'click', function(event) { // stop the default click action event.preventDefault(); // set active $(this).parent().siblings().find('.active').removeClass('active'); $(this).addClass('active'); // find the appropriate elements $('.adjoin-options *[data-heading]').hide(); $('.adjoin-options *[data-heading="'+$(this).attr('data-show')+'"].').fadeIn(); }); $('.adjoin-header').find('a[data-show]').eq(0).trigger('click'); } $(document).ready(function () { var $filter = $('#filter-drop'); var $filterSpacer = $('<div />', { "class": "filter-drop-spacer", "height": $filter.outerHeight() }); var $homeShield = $('.home .primary'); var $totalHeight = $('.carousel').outerHeight() + $('.header').outerHeight() if ($filter.size()) { $(window).scroll(function () { if($(window).scrollTop() > $totalHeight ) { $homeShield.addClass("shieldfix"); } else if ($homeShield.hasClass('shieldfix') && $(window).scrollTop() < $totalHeight) { $homeShield.removeClass("shieldfix"); } if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top) { $filter.css('width', $filter.width()); $filter.before($filterSpacer); $filter.addClass("fix"); } else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top) { $filter.removeClass("fix"); $filterSpacer.remove(); } }); } }); function get_more_home_items() { if ( views_left>0 ) { jQuery("#home_items_loading").show(); jQuery.ajax({ type: 'POST', url: 'ajax/home_items', data: 'timestamp='+curr_timestamp+'&index='+views_left, dataType: 'json', success: function(data) { jQuery("#home_items_loading").hide(); jQuery("#home_content").append(data.html); curr_timestamp=data.timestamp; } }); views_left--; } var click_index = 2-views_left; _gaq.push(['_trackEvent', 'ViewMoreChannels', 'Click', 'ViewMore_'+click_index.toString(), 3]); if ( views_left<=0 ) { jQuery("#view_more").hide(); } } /*------------------------------------------- Add Zebra Strip Rows of table with class "stripe" -- Chris Traganos -------------------------------------------*/ function zebra_strip_rows() { $("table.stripe tr:odd").addClass("odd"); $("table.stripe tr:even").addClass("even"); } function visitor_site_slideshow() { /* $('.visitors_slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); */ }
以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
jQuery,左右切换,焦点图
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无jQuery实现左右切换焦点图的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。