jQuery 垂直滑动快讯展示

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="//img.reader8.com/uploadfile/2014/0426/20140426043729864.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="//img.reader8.com/uploadfile/2014/0426/20140426043851844.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?style="margin: auto; padding: 0px; color: blue;">'.highlight');??
28. ??newsListItems.addClass('nh-anim');??
29. ??
30. ??function?doEqualHeight()?{??
31. ??
32. ????if?(newsPreview.height()?<?newsList.height())?{??
33. ??????newsPreview.height(newsList.height());??
34. ????}?else?if?((newsList.height()?<?newsPreview.height())?&&?(newsList.height()?>?parseInt(newsPreview.css('min-height').replace('px',?''),?10)))?{??
35. ??????newsPreview.height(newsList.height());??
36. ????}??
37. ??
38. ??}??
39. ??
40. ??function?doTimedSwitch()?{??
41. ??
42. ????myTimer?=?setInterval(function?()?{??
43. ??????if?(($('.selected').prev().index()?+?1)?===?elCount)?{??
44. ????????firstNewsItem.trigger('click');??
45. ??????}?else?{??
46. ????????$('.selected').next(':not(.highlight)').trigger('click');??
47. ??????}??
48. ????},?speed);??
49. ??
50. ??}??
51. ??
52. ??function?doClickItem()?{??
53. ??
54. ????newsListItems.on('click',?function?()?{??
55. ??
56. ??????newsListItems.removeClass('selected');??
57. ??????$(this).addClass('selected');??
58. ??
59. ??????siblings?=?$(this).prevAll();??
60. ??????totalHeight?=?0;??
61. ??
62. ??????//?this?loop?calculates?the?height?of?individual?elements,?including?margins/padding??
63. ??????for?(i?=?0;?i?<?siblings.length;?i?+=?1)?{??
64. ??????????totalHeight?+=?$(siblings[i]).height();??
65. ??????????totalHeight?+=?vPadding;??
66. ??????????totalHeight?+=?vMargin;??
67. ??????}??
68. ??
69. ??????//?this?moves?the?highlight?vertically?the?distance?calculated?in?the?previous?loop??
70. ??????//?and?also?corrects?the?height?of?the?highlight?to?match?the?current?selection??
71. ??????hl.css({??
72. ????????top:?totalHeight,??
73. ????????height:?$(this).height()?+?vPadding??
74. ??????});??
75. ??
76. ??????indexEl?=?$(this).index()?+?1;??
77. ??
78. ??????$('.news-content:nth-child('?+?indexEl?+?')').siblings().removeClass('top-content');??
79. ??????$('.news-content:nth-child('?+?indexEl?+?')').addClass('top-content');??
80. ??
81. ??????clearInterval(myTimer);??
82. ??????//?comment?out?the?line?below?if?you?don't??
83. ??????//?want?it?to?rotate?automatically??
84. ??????doTimedSwitch();??
85. ??
86. ????});??
87. ??
88. ??}??
89. ??
90. ??function?doWindowResize()?{??
91. ??
92. ????$(window).resize(function?()?{??
93. ??
94. ??????clearInterval(myTimer);??
95. ??????//?click?is?triggered?to?recalculate?and?fix?the?highlight?position??
96. ??????$('.selected').trigger('click');?
97. ?
98. ??????doEqualHeight();?
99. ?
100. ????});??
101. ?
102. ??}?
103. ?
104. ??//?this?is?the?poor?man's?'init'?section??
105. ??doClickItem();??
106. ??doWindowResize();??
107. ??doEqualHeight();??
108. ??$('.selected').trigger('click');??
109. ??
110. });??

?

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