相思资源网 Design By www.200059.com

演示图:

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"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
相思资源网 Design By www.200059.com

评论“jQuery实现左右切换焦点图”

暂无jQuery实现左右切换焦点图的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。