首页>>Jquery文字>>jQuery 垂直滑动新闻展示(2013-12-04)

jQuery 垂直滑动新闻展示

jQuery 垂直滑动新闻展示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="news-holder cf">  
  2. <ul class="news-headlines">  
  3. <li class="selected">100 red bicycles stolen from local bike store</li>  
  4. <li>New leash laws in effect for floppy-eared dogs</li>  
  5. <li>Insider: Can palm trees be saved?</li>  
  6. <li>Fresh recipes to titillate the taste buds</li>  
  7. <li>Truck inspections under way for the metropolitan area</li>  
  8. <li>Are the beaches safe for swimming this year?</li>  
  9. <!-- li.highlight gets inserted here -->  
  10. </ul>  
  11. <div class="news-preview">  
  12. <div class="news-content top-content"> <img src="http://cdn.impressivewebs.com/news1.jpg">  
  13. <p><a href="#">100 red bicycles stolen from local bike store</a></p>  
  14. <p>A hundred red bicycles were stolen from under our noses yesterday, and nobody knows what went wrong.</p>  
  15. </div>  
  16. <!-- .news-content -->  
  17.   
  18. <div class="news-content"> <img src="http://cdn.impressivewebs.com/news2.jpg">  
  19. <p><a href="#">New leash laws in effect for floppy-eared dogs</a></p>  
  20. <p>Ears on dogs can be a tricky thing. Find out more about this amazing story and why these dogs are a nuisance.</p>  
  21. </div>  
  22. <!-- .news-content -->  
  23.   
  24. <div class="news-content"> <img src="http://cdn.impressivewebs.com/news3.jpg">  
  25. <p><a href="#">Insider: Can palm trees be saved?</a></p>  
  26. <p>Ah, the palm tree. It feeds us, it shades us, it does whatever we ask. We should think about it more deeply.</p>  
  27. </div>  
  28. <!-- .news-content -->  
  29.   
  30. <div class="news-content"> <img src="http://cdn.impressivewebs.com/news4.jpg">  
  31. <p><a href="#">Fresh recipes to titillate the taste buds</a></p>  
  32. <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>  
  33. </div>  
  34. <!-- .news-content -->  
  35.   
  36. <div class="news-content"> <img src="http://cdn.impressivewebs.com/news5.jpg">  
  37. <p><a href="#">Truck inspections under way for the metropolitan area</a></p>  
  38. <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>  
  39. </div>  
  40. <!-- .news-content -->  
  41.   
  42. <div class="news-content"> <img src="http://cdn.impressivewebs.com/news6.jpg">  
  43. <p><a href="#">Are the beaches safe for swimming this year?</a></p>  
  44. <p>Giant orange pedal boats have been spotted at various beaches. In this report we tell you some ridiculous precautions to take.</p>  
  45. </div>  
  46. <!-- .news-content -->   
  47.   
  48. </div>  
  49. <!-- .news-preview -->   
  50.   
  51. </div>  
  52. <!-- .news-holder -->   

 

JavaScript Code
  1. /*globals window, $, clearInterval, setInterval */  
  2.   
  3. $(function () {  
  4.   "use strict";  
  5.   
  6.   var          hl,  
  7.          newsList = $('.news-headlines'),  
  8.     newsListItems = $('.news-headlines li'),  
  9.     firstNewsItem = $('.news-headlines li:nth-child(1)'),  
  10.       newsPreview = $('.news-preview'),  
  11.           elCount = $('.news-headlines').children(':not(.highlight)').index(),  
  12.          vPadding = (parseInt(firstNewsItem.css('padding-top').replace('px', ''), 10)) +  
  13.                     (parseInt(firstNewsItem.css('padding-bottom').replace('px', ''), 10)),  
  14.           vMargin = (parseInt(firstNewsItem.css('margin-top').replace('px', ''), 10)) +  
  15.                     (parseInt(firstNewsItem.css('margin-bottom').replace('px', ''), 10)),  
  16.             speed = 5000, // this is the speed of the switch  
  17.           myTimer = null,  
  18.          siblings = null,  
  19.       totalHeight = null,  
  20.           indexEl = 1,  
  21.                 i = null;  
  22.   
  23.   // the css animation gets added dynamicallly so   
  24.   // that the news item sizes are measured correctly  
  25.   // (i.e. not in mid-animation)  
  26.   // Also, appending the highlight item to keep HTML clean  
  27.   newsList.append('<li class="highlight nh-anim"></li>');  
  28.   hl = $('.highlight');  
  29.   newsListItems.addClass('nh-anim');  
  30.   
  31.   function doEqualHeight() {  
  32.   
  33.     if (newsPreview.height() < newsList.height()) {  
  34.       newsPreview.height(newsList.height());  
  35.     } else if ((newsList.height() < newsPreview.height()) && (newsList.height() > parseInt(newsPreview.css('min-height').replace('px', ''), 10))) {  
  36.       newsPreview.height(newsList.height());  
  37.     }  
  38.   
  39.   }  
  40.   
  41.   function doTimedSwitch() {  
  42.   
  43.     myTimer = setInterval(function () {  
  44.       if (($('.selected').prev().index() + 1) === elCount) {  
  45.         firstNewsItem.trigger('click');  
  46.       } else {  
  47.         $('.selected').next(':not(.highlight)').trigger('click');  
  48.       }  
  49.     }, speed);  
  50.   
  51.   }  
  52.   
  53.   function doClickItem() {  
  54.   
  55.     newsListItems.on('click', function () {  
  56.   
  57.       newsListItems.removeClass('selected');  
  58.       $(this).addClass('selected');  
  59.   
  60.       siblings = $(this).prevAll();  
  61.       totalHeight = 0;  
  62.   
  63.       // this loop calculates the height of individual elements, including margins/padding  
  64.       for (i = 0; i < siblings.length; i += 1) {  
  65.           totalHeight += $(siblings[i]).height();  
  66.           totalHeight += vPadding;  
  67.           totalHeight += vMargin;  
  68.       }  
  69.   
  70.       // this moves the highlight vertically the distance calculated in the previous loop  
  71.       // and also corrects the height of the highlight to match the current selection  
  72.       hl.css({  
  73.         top: totalHeight,  
  74.         height: $(this).height() + vPadding  
  75.       });  
  76.   
  77.       indexEl = $(this).index() + 1;  
  78.   
  79.       $('.news-content:nth-child(' + indexEl + ')').siblings().removeClass('top-content');  
  80.       $('.news-content:nth-child(' + indexEl + ')').addClass('top-content');  
  81.   
  82.       clearInterval(myTimer);  
  83.       // comment out the line below if you don't  
  84.       // want it to rotate automatically  
  85.       doTimedSwitch();  
  86.   
  87.     });  
  88.   
  89.   }  
  90.   
  91.   function doWindowResize() {  
  92.   
  93.     $(window).resize(function () {  
  94.   
  95.       clearInterval(myTimer);  
  96.       // click is triggered to recalculate and fix the highlight position  
  97.       $('.selected').trigger('click'); 
  98.  
  99.       doEqualHeight(); 
  100.  
  101.     });  
  102.  
  103.   } 
  104.  
  105.   // this is the poor man's 'init' section  
  106.   doClickItem();  
  107.   doWindowResize();  
  108.   doEqualHeight();  
  109.   $('.selected').trigger('click');  
  110.   
  111. });  

 


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