課程
/前端開發
/JavaScript
/信息滾動效果制作
大神能否幫忙貼一份放在外部文件的js代碼。
2018-06-13
源自:信息滾動效果制作 2-2
正在回答
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"?/> <meta?http-equiv="X-UA-Compatible"?content="IE=edge"> <title>Page?Title</title> <meta?name="viewport"?content="width=device-width,?initial-scale=1"> <link?rel="stylesheet"?type="text/css"?media="screen"?href="css/style.css"?/> <script?type="text/javascript"?src="js/script.js"></script> </head> <body> <!--??慕課網課程公告開始?--> <div??id="mooc"> <!--??頭部?--> <h3?id="moocTitle">最新課程<a?href="#"?target="_self">更多>></a>?</h3> <!--??頭部結束?--> <!--??中間?--> <div??id="moocBox"> <ul?id="con1"> <li><a?href="#">1.學會html5?絕對的屌絲逆襲(案例)</a><span>2013-09-18</span></li> <li><a?href="#">2.tab頁面切換效果(案例)</a><span>2013-10-09</span></li> <li><a?href="#">3.圓角水晶按鈕制作(案例)</a><span>2013-10-21</span></li> <li><a?href="#">4.HTML+CSS基礎課程(系列)</a><span>2013-11-01</span></li> <li><a?href="#">5.分頁頁碼制作(案例)</a><span>2013-11-06</span></li> <li><a?href="#">6.導航條菜單的制作(案例)</a><span>2013-11-08</span></li> <li><a?href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a?href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li> <li><a?href="#">9.如何實現“新手引導”效果</a><span>2013-12-06</span></li> </ul> <ul?id="con2"> </ul> </div> <!--??中間結束?--> </div> <!--??慕課網課程公告結束?--> </body> </html> window.onload?=?function(){ var?area?=?document.getElementById('moocBox'); var?con1?=?document.getElementById('con1'); var?con2?=?document.getElementById('con2'); var?speed?=?50; area.scrollTop?=?0; con2.innerHTML?=?con1.innerHTML; function?scrollUp(){ if(area.scrollTop?>=?con1.scrollHeight)?{ area.scrollTop?=?0; }else{ area.scrollTop?++; } } var?myScroll?=?setInterval("scrollUp()",speed); area.onmouseover?=?function(){ clearInterval(myScroll); } area.onmouseout?=?function(){ myScroll?=?setInterval("scrollUp()",speed); } } body?{ ????font-size:?12px; ????line-height:?24px; text-align:?center;????????/*?頁面內容居中?*/ } *?{ ????margin:?0px; ????padding:?0px;????????????/*??去掉所有標簽的marign和padding的值??*/ } ul?{ ????list-style:?none;???????????/*??去掉ul標簽默認的點樣式??*/ } a?img?{ ????border:?none;????????/*??超鏈接下,圖片的邊框??*/ } a?{ ????color:?#333; ????text-decoration:?none;?????/*?超鏈接樣式?*/ } a:hover?{ ????color:?#ff0000; } #mooc?{ ????width:?399px; ????border:?5px?solid?#ababab; ????-moz-border-radius:?15px;??????/*?Gecko?browsers?*/ ????-webkit-border-radius:?15px;???/*?Webkit?browsers?*/ ????border-radius:?15px; ????box-shadow:?2px?2px?10px?#ababab; ????margin:?50px?auto?0; ????text-align:?left;???????????????/*?讓新聞內容靠左?*/ } /*??頭部樣式?*/? #moocTitle?{ ????height:?62px; ????overflow:?hidden;??/*?這個一定要加上,內容超出的部分要隱藏,免得撐高頭部?*/ ????font-size:?26px; ????line-height:?62px; ????padding-left:?30px; ????background-image:?-moz-linear-gradient(top,?#f05e6f,?#c9394a);?/*?Firefox?*/ ????background-image:?-webkit-gradient(linear,?left?top,?left?bottom,?color-stop(0,?#f05e6f),?color-stop(1,?#c9394a));?/*?Saf4+,?Chrome?*/ filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff',?endColorstr='#f05e6f',?GradientType='0');?/*?IE*/ ????border:?1px?solid?#f05e6f; ????-moz-border-radius:?8px?8px?0?0;??????/*?Gecko?browsers?*/ ????-webkit-border-radius:?8px?8px?0?0;???/*?Webkit?browsers?*/ ????border-radius:?8px?8px?0?0; ????color:?#fff; ????position:?relative; } #moocTitle?a?{ ????position:?absolute; ????right:?10px; ????bottom:?10px; ????display:?inline; ????color:?#fff; ????font-size:?12px; ????line-height:?24px; } /*??底部樣式?*/ #moocBot?{ ????width:?399px; ????height:?10px; ????overflow:?hidden;?????/*?這個一定要加上,內容超出的部分要隱藏,免得撐高底部結構?*/ } /*??中間樣式?*/ #moocBox?{ ????height:?144px; ????width:?335px; ????margin-left:?25px; ????margin-top:?10px; ????overflow:?hidden;????/*??這個一定要加,超出的內容部分要隱藏,免得撐高中間部分?*/ } #mooc?ul?li?{ ????height:?24px; } #mooc?ul?li?a?{ ????width:?180px; ????float:?left; ????display:?block; ????overflow:?hidden; ????text-indent:?15px; ????height:?24px; } #mooc?ul?li?span?{ ????float:?right; ????color:?#999; }
舉報
萌妹子帶您快速學習滾動效果,掌握無縫滾動和歇間性滾動的制作方法
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-06-14