jQuery 垂直滑动新闻展示

jQuery 垂直滑动新闻展示

演示

 

XML/HTML Code

<div class="news-holder cf">
<ul class="news-headlines">
<li class="selected">100 red bicycles stolen from local bike store</li>
<li>New leash laws in effect for floppy-eared dogs</li>
<li>Insider: Can palm trees be saved?</li>
<li>Fresh recipes to titillate the taste buds</li>
<li>Truck inspections under way for the metropolitan area</li>
<li>Are the beaches safe for swimming this year?</li>
<!-- li.highlight gets inserted here -->
</ul>
<div class="news-preview">
<div class="news-content top-content"> <img src="http://cdn.impressivewebs.com/news1.jpg">
<p><a href="#">100 red bicycles stolen from local bike store</a></p>
<p>A hundred red bicycles were stolen from under our noses yesterday, and nobody knows what went wrong.</p>
</div>
<!-- .news-content -->

<div class="news-content"> <img src="http://cdn.impressivewebs.com/news2.jpg">
<p><a href="#">New leash laws in effect for floppy-eared dogs</a></p>
<p>Ears on dogs can be a tricky thing. Find out more about this amazing story and why these dogs are a nuisance.</p>
</div>
<!-- .news-content -->

<div class="news-content"> <img src="http://cdn.impressivewebs.com/news3.jpg">
<p><a href="#">Insider: Can palm trees be saved?</a></p>
<p>Ah, the palm tree. It feeds us, it shades us, it does whatever we ask. We should think about it more deeply.</p>
</div>
<!-- .news-content -->

<div class="news-content"> <img src="http://cdn.impressivewebs.com/news4.jpg">
<p><a href="#">Fresh recipes to titillate the taste buds</a></p>
<p>Food is great. These recipes will make you appreciate food as if it were even greater than great. It will be super great.</p>
</div>
<!-- .news-content -->

<div class="news-content"> <img src="http://cdn.impressivewebs.com/news5.jpg">
<p><a href="#">Truck inspections under way for the metropolitan area</a></p>
<p>The Sherrif's department has put out an APB on these trucks. You know, this is the kind of thing that only happens in small towns.</p>
</div>
<!-- .news-content -->

<div class="news-content"> <img src="http://cdn.impressivewebs.com/news6.jpg">
<p><a href="#">Are the beaches safe for swimming this year?</a></p>
<p>Giant orange pedal boats have been spotted at various beaches. In this report we tell you some ridiculous precautions to take.</p>
</div>
<!-- .news-content -->

</div>
<!-- .news-preview -->

</div>
<!-- .news-holder -->

 

JavaScript Code

/*globals window, $, clearInterval, setInterval */

$(function () {
  "use strict";

  var          hl,
         newsList = $('.news-headlines'),
    newsListItems = $('.news-headlines li'),
    firstNewsItem = $('.news-headlines li:nth-child(1)'),
      newsPreview = $('.news-preview'),
          elCount = $('.news-headlines').children(':not(.highlight)').index(),
         vPadding = (parseInt(firstNewsItem.css('padding-top').replace('px', ''), 10)) +
                    (parseInt(firstNewsItem.css('padding-bottom').replace('px', ''), 10)),
          vMargin = (parseInt(firstNewsItem.css('margin-top').replace('px', ''), 10)) +
                    (parseInt(firstNewsItem.css('margin-bottom').replace('px', ''), 10)),
            speed = 5000, // this is the speed of the switch
          myTimer = null,
         siblings = null,
      totalHeight = null,
          indexEl = 1,
                i = null;

  // the css animation gets added dynamicallly so
  // that the news item sizes are measured correctly
  // (i.e. not in mid-animation)
  // Also, appending the highlight item to keep HTML clean
  newsList.append('<li class="highlight nh-anim"></li>');
  hl = $('.highlight');
  newsListItems.addClass('nh-anim');

  function doEqualHeight() {

    if (newsPreview.height() < newsList.height()) {
      newsPreview.height(newsList.height());
    } else if ((newsList.height() < newsPreview.height()) && (newsList.height() > parseInt(newsPreview.css('min-height').replace('px', ''), 10))) {
      newsPreview.height(newsList.height());
    }

  }

  function doTimedSwitch() {

    myTimer = setInterval(function () {
      if (($('.selected').prev().index() + 1) === elCount) {
        firstNewsItem.trigger('click');
      } else {
        $('.selected').next(':not(.highlight)').trigger('click');
      }
    }, speed);

  }

  function doClickItem() {

    newsListItems.on('click', function () {

      newsListItems.removeClass('selected');
      $(this).addClass('selected');

      siblings = $(this).prevAll();
      totalHeight = 0;

      // this loop calculates the height of individual elements, including margins/padding
      for (i = 0; i < siblings.length; i += 1) {
          totalHeight += $(siblings[i]).height();
          totalHeight += vPadding;
          totalHeight += vMargin;
      }

      // this moves the highlight vertically the distance calculated in the previous loop
      // and also corrects the height of the highlight to match the current selection
      hl.css({
        top: totalHeight,
        height: $(this).height() + vPadding
      });

      indexEl = $(this).index() + 1;

      $('.news-content:nth-child(' + indexEl + ')').siblings().removeClass('top-content');
      $('.news-content:nth-child(' + indexEl + ')').addClass('top-content');

      clearInterval(myTimer);
      // comment out the line below if you don't
      // want it to rotate automatically
      doTimedSwitch();

    });

  }

  function doWindowResize() {

    $(window).resize(function () {

      clearInterval(myTimer);
      // click is triggered to recalculate and fix the highlight position
      $('.selected').trigger('click');

      doEqualHeight();

    });

  }

  // this is the poor man's 'init' section
  doClickItem();
  doWindowResize();
  doEqualHeight();
  $('.selected').trigger('click');

});

 

原文地址:http://www.freejs.net/article_jquerywenzi_144.html