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