jQuery开发左右切换焦点图实现方法
程序员文章站
2022-06-01 11:17:47
演示图:
代码:
$(document).ready(function() {
greyinitredux();
iedropdownsnav()...
演示图:
代码:
$(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? var itemoffset = $('.expandable .listing > li').size(); //find out if we clicked the menu, if so, clear out everything and add data attribute to the load more if($(this).closest('p').hasclass("filter")) { var hiddendiv = $('<p />', { "class": "items hidden spacer", "height": $('.expandable').outerheight() }); $('.expandable > .load').before(hiddendiv); $('.expandable > ul, .expandable > p: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 = $('<p />', { "class": "items hidden spacer", "height": $('.expandable').outerheight() }); $('.expandable > .load').before(hiddendiv); $('.expandable > ul, .expandable > p:not(.spacer)').remove(); } $.get(datasrc, { offset: itemoffset, sort: datasort }, function(data) { $('.expandable .spacer').remove(); var hiddendiv = $('<p class="items hidden"></p>'); $('.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); $('p.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); }); $('p.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 p and add it to the markup var $controls = $('<p />', {"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')) ? 1 : -1; // check that the upcoming movement won't push the first element too far to the right // leaving whitespace before the element if ($slider.find('> *').eq(0).position().left + widthdelta > 0) { return true; } // check that the upcoming movement won't push the last element too far to the left // leaving whitespace after the element var $lastchild = $slider.find('> *').eq(-1) if ($lastchild.position().left + widthdelta < $slider.outerwidth() - $lastchild.outerwidth() - 1) { return true; } // get all the child elements, so we can loop through them and detmine offsets based // on widths var $siblings = $slider.find('> *'); // finally loop through each child and kick off the animation $siblings.each(function(index) { // we'll determine the `left` in just a second, sit tight var left = 0; // localize the child element var $li = $(this); // loop through each sibling and determine the new left if (index < focusedindex) { left = -$slider.outerwidth(); } if (index >= focusedindex && index < focusedindex + 3) { left = 219 * (index - focusedindex); } if (index >= focusedindex + 3) { left = $slider.outerwidth() * 2; } // start the animation $li.animate({'left': left}, 300); // are we at the beginning? if (index == 0 && left == 0) { $slider.prop('controls').find('.prev').addclass('disabled'); } else if (index == 0) { $slider.prop('controls').find('.prev').removeclass('disabled'); } // are we at the end? if (index == $siblings.size()-1 && left == $slider.outerwidth() - $lastchild.outerwidth() - 1) { $slider.prop('controls').find('.next').addclass('disabled'); } else if (index == $siblings.size()-1) { $slider.prop('controls').find('.next').removeclass('disabled'); } }); // if we got down here then we actually moved the slider, update the reference to the // focused slide $slider.prop('index', focusedindex); }); } function headertabs() { var $tabset = $('.heading-tabset') $tabset.find('.listing:gt(0)').hide(); $tabset.find('.controls:gt(0)').hide(); $tabset.find('.heading-tab li').eq(0).addclass('active'); $(document).delegate('.heading-tab a', 'click', function(event) { event.preventdefault(); $(this).parent().addclass('active'); $(this).parent().siblings().removeclass('active'); var index = $(this).parent().prevall('*').size(); $(this).parents('.heading-tabset').find('.listing').hide(); $(this).parents('.heading-tabset').find('.listing').eq(index).show(); $(this).parents('.heading-tabset').find('.controls').hide(); $(this).parents('.heading-tabset').find('.controls').eq(index).show(); }); } function carousel() { $(document).delegate('.carousel .next, .carousel .previous', 'click', function(event) { // prevent the default anchor action event.preventdefault(); // get the current carousel var $carousel = $(this).parents('.carousel'); // check if we're already in the middle of a movement if ($carousel.prop('moving')) { return true; } // if we actually clicked it, then stop any running timers if (event.clientx) { stop($carousel); } // localize the index, so we know where we are var index = $carousel.prop('index'); // determine if we're going forward or backward var movingforward = $(this).hasclass('next'); // grab all the slides var $slides = $carousel.find('.carousel-item'); // grab the currently focused slide var $focus = $slides.eq(index); // figure out where're we going from here var nextobject = movingforward ? nextslide($carousel, index) : previousslide($carousel, index); // locaalize the next p to be shown var $next = nextobject.element; // localize the index of the next element to be shown var newindex = nextobject.index; // determine where we should place the next element so it slides from the correct side var initialleft = movingforward ? $(document.body).outerwidth() : -$next.outerwidth(); // save the current zero position, everything will move to/from here var zeroposition = $focus.offset().left; // determine where the focus is moving to var targetleft = zeroposition + (movingforward ? -$next.outerwidth() : $next.outerwidth()); // we're comitted to moving now so set the flag to true so we don't duplicate animations $carousel.prop('moving', true); // reset all z-indexes to 1 $slides.css('z-index', 1); // make the currently focused slide higher than all the rest $focus.css('z-index', 2); // setup the current slide so it can animate out $focus.css({ "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? start it if (!timer) { start($carousel); } // timer? stop it else { stop($carousel); } }); // start a new timer, additionally update the play/pause button to the correct visual state function start($carousel) { timer = setinterval(function() { $carousel.find('.next').eq(0).trigger('click'); //n.c.: added to stop carousel after one round. var index = $carousel.prop('index'); if ( index==0 && carousel_round > 0 ) { stop($carousel); } else if ( index==1 ) { carousel_round++; } }, 5000); $carousel.prop('timer', timer); $carousel.find('.play.pause').removeclass('play'); } // stop any existing timers, additionally update the play/pause button to the correct // visual state function stop($carousel) { clearinterval(timer); $carousel.prop('timer', false); $carousel.find('.pause').addclass('play'); //n.c.: added to stop carousel after one round. carousel_round = 0; } function nextslide($carousel, index) { var $slides = $carousel.find('.carousel-item'); if (index+1 < $slides.size()) { return {"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 = $('<p />', {"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 = $('<p />', {"id": "twitter-wrap"}); //$twitterwrap.append($close); $twitter = $('<p />', {"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($('<p />', {"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 = $('<p />', { "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... }); */ }
上一篇: 亲爱的你太幽默了
下一篇: Angular性能优化之脏检测