欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery开发左右切换焦点图实现方法

程序员文章站 2022-06-01 11:17:47
演示图: 代码: $(document).ready(function() { greyinitredux(); iedropdownsnav()...

演示图:

jQuery开发左右切换焦点图实现方法

代码:

$(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...
 });  */
  
}