練習題：間歇性向上滾動
阿新 • • 發佈：2017-07-14
切換 .get 下拉菜單 splay 步驟 所有 scrolltop har orm
1 <!DOCTYPE html > 2 <html > 3 <head> 4 <meta charset=utf-8" /> 5 <title>新聞間歇性向上滾動</title> 6 <style> 7 body { 8 font-size: 12px; 9 line-height: 24px; 10 text-algin: center; /* 頁面內容居中 */ 11 } 12 * { 13 margin: 0px; 14padding: 0px; /* 去掉所有標簽的marign和padding的值 */ 15 } 16 ul { 17 list-style: none; /* 去掉ul標簽默認的點樣式 */ 18 } 19 a img { 20 border: none; /* 超鏈接下，圖片的邊框 */ 21 } 22 a { 23 color: #333; 24 text-decoration: none; /* 超鏈接樣式 */ 25 } 26 a:hover { 27 color: #ff0000; 28 } 29 #mooc { 30 width: 399px; 31 border: 5px solid #ababab; 32 -moz-border-radius: 15px; /* Gecko browsers */ 33 -webkit-border-radius: 15px; /* Webkit browsers */ 34 border-radius: 15px; 35 box-shadow: 2px 2px 10px #ababab; 36 margin: 50px auto 0; 37 text-align: left; /* 讓新聞內容靠左 */ 38 } 39 /* 頭部樣式 */ 40 #moocTitle { 41 height: 62px; 42 overflow: hidden; /* 這個一定要加上，內容超出的部分要隱藏，免得撐高頭部 */ 43 font-size: 26px; 44 line-height: 62px; 45 padding-left: 30px; 46 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ 47 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */ 48 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#8fa1ff‘, endColorstr=‘#f05e6f‘, GradientType=‘0‘); /* IE*/ 49 border: 1px solid ##f05e6f; 50 -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */ 51 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */ 52 border-radius: 8px 8px 0 0; 53 color: #fff; 54 position: relative; 55 } 56 #moocTitle a { 57 position: absolute; 58 right: 10px; 59 bottom: 10px; 60 display: inline; 61 color: #fff; 62 font-size: 12px; 63 line-height: 24px; 64 } 65 /* 底部樣式 */ 66 #moocBot { 67 width: 399px; 68 height: 10px; 69 overflow: hidden; /* 這個一定要加上，內容超出的部分要隱藏，免得撐高底部結構 */ 70 } 71 /* 中間樣式 */ 72 #moocBox { 73 height: 144px; 74 width: 335px; 75 margin-left: 25px; 76 margin-top: 10px; 77 overflow: hidden; /* 這個一定要加，超出的內容部分要隱藏，免得撐高中間部分 */ 78 } 79 #mooc ul li { 80 height: 24px; 81 } 82 #mooc ul li a { 83 width: 180px; 84 float: left; 85 display: block; 86 overflow: hidden; 87 text-indent: 15px; 88 height: 24px; 89 } 90 #mooc ul li span { 91 float: right; 92 color: #999; 93 } 94 </style> 95 </head> 96 97 <body> 98 <!-- 前端課程公告開始 --> 99 <div id="mooc"> 100 <!-- 頭部 --> 101 <div id="moocTitle">前端最新課程<a href="#" target="_self">更多>></a> </div> 102 <!-- 頭部結束 --> 103 <!-- 中間 --> 104 <div id="moocBox"> 105 <ul> 106 <li><a href="#">1.學會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li> 107 <li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li> 108 <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li> 109 <li><a href="#">4.HTML+CSS基礎課程(系列)</a><span>2013-11-01</span></li> 110 <li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li> 111 <li><a href="#">6.導航條菜單的制作（案例）</a><span>2013-11-08</span></li> 112 <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> 113 <li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li> 114 <li><a href="#">9.如何實現“新手引導”效果</a><span>2013-12-06</span></li> 115 </ul> 116 </div> 117 <!-- 中間結束 --> 118 <!-- 底部 --> 119 <div id ="moocBot"> </div> 120 <!-- 底部結束 --> 121 </div> 122 <!-- 前端課程公告結束 --> 123 124 <script type="text/javascript"> 125 var area = document.getElementById(‘moocBox‘); 126 var iliHeight = 24;//單行滾動的高度 127 var speed = 50;//滾動的速度 128 var time; 129 var delay= 2000; 130 area.scrollTop=0; 131 area.innerHTML+=area.innerHTML;//克隆一份一樣的內容 132 function startScroll(){ 133 time=setInterval("scrollUp()",speed); 134 area.scrollTop++; 135 } 136 function scrollUp(){ 137 if(area.scrollTop % iliHeight==0){ 138 clearInterval(time); 139 setTimeout(startScroll,delay); 140 }else{ 141 area.scrollTop++; 142 if(area.scrollTop >= area.scrollHeight/2){ 143 area.scrollTop =0; 144 } 145 } 146 } 147 setTimeout(startScroll,delay) 148 </script> 149 </body> 150 </html>
做題思路及註意點：：
1：樣式布局方面：
（1）註意#moocBox的包裹層設置高度為滾動信息高度的倍數（例如滾動信息li的高度24px;#moocBox的包裹層要顯示6條信息設置高度為24*6=144px；）；
（2）#moocBox的包裹層樣式overflow: hidden; 這個一定要加，超出的內容部分要隱藏，免得撐高中間部分；
2：js交互方面：
（1）用setTimeout 實現間歇，用setInterval（）方法實現向上滾動；
（2）js詳細做題步驟：
獲取信息包裹層，定義信息包裹層的area.scrollTop=0,定義liHeight=24；定義var time；
area.innerHTML+=area.innerHTML;//克隆一份一樣的內容；
信息向上滾動：function startScroll(){time=setInterval（"scrollUp()",50）;area.scrollTop++;}//
間歇性 ： function scrollUp（）{
if(scrollTop % liHeight==0){ //當向上卷去的高度能夠被liHeight除盡沒有余數； clearInterval(time) 停止向上滾動； setTimeout(startScroll,2000); 延遲兩秒後執行 }else{ area.scrollTop++; 當以上條件不符合時，繼續向上滾動 if(scrollTop>=area.scrollHeight/2){ 即向上卷去的內容大於等於area.scrollHeight時， area.scrollTop =0; 重新開始計算。實現重復滾動 ，除以2是因為克隆多了一份內容 area.scrollTop =0; } } } setTimeout(startScroll,2000) 調用執行；
練習題：間歇性向上滾動