新聞上下迴圈滾動html樣式
阿新 • • 發佈：2019-02-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #div_con { position: relative; width: 300px; height: 350px; margin: 20px; border: 2px solid #eee; overflow: hidden; } #div_msg { position: absolute; width: 280px; height: auto; margin: 0; padding: 10px; border: 0px solid red; } </style> </head> <body> <!--灰色邊框容器div--> <div id='div_con'> <!--訊息div--> <div id='div_msg'> </div> </div> <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script> <script> var msg1 = '<h2>嫦娥四號中繼星成功發射 將搭建地月“鵲橋”</h2> ' + '<img style="width:100%" src="http://img0.utuku.china.com/650x0/mili/20180521/444bb55a-dbd3-4b99-9aba-6e13974fcaa9.jpg" />' + '新華社西昌5月21日電（記者白國龍、餘曉潔）21日5時28分，我國在西昌衛星發射中心用長征四號丙運載火箭，成功將探月工程嫦娥四號任務“鵲橋”號中繼星發射升空。這是世界首顆運行於地月拉格朗日L2點（簡稱地月L2點）的通訊衛星，將為2018年底擇機實施的嫦娥四號月球背面軟著陸探測任務提供地月間的中繼通訊。<br/>' + '長征四號丙運載火箭飛行25分鐘後，星箭分離，將“鵲橋”直接送入近地點高度200公里，遠地點高度40萬公里的預定地月轉移軌道，衛星太陽翼和中繼通訊天線相繼展開正常。後續，“鵲橋”將經中途修正、近月制動和月球借力，進入月球至地月L2點的轉移軌道，通過3次捕獲控制和修正後，最終進入環繞地月L2點的使命軌道，地月L2點是衛星相對於地球和月球基本保持靜止的一個空間點。<br/><br/> '; var msg2 = '<h2>遼寧號航母和056輕護同框組“最萌身高差” </h2> ' + '2018-05-21 13:32 <br/>' + '<img style="width:100%" src="https://t1.huanqiu.cn/5e798738c0d468b49b3534087f910a1e.jpg" />' + '【環球網軍事綜合報道】有照片顯示中國海軍遼寧號航母在航行時，在右舷前方有一艘056型輕型護衛艦航行的情景。遼寧號是目前中國海軍現役最大的水面戰艦，而056型則是中國一款輕型護衛艦，僅有1400噸，兩艘軍艦組成了“最萌身高差”。<br/>' + '在遼寧艦面前，056型護衛艦就是一個小不點<br/><br/> '; var msg = msg1 + msg2; //先賦值div $('#div_msg').html(msg); //獲取div的高度 var msg_height = $('#div_msg').height(); //加2次，這樣完全移動完的時候不至於出現空白 $('#div_msg').html(msg + msg); var con_height = $('#div_con').height(); var sub_height = con_height - msg_height; console.log('msg_height=' + msg_height + ', con_height=' + con_height + ",sub_height=" + sub_height); //當前頂部座標 var cur_top = 0; function scrollme() { cur_top--; //如果整個訊息都已經上移完了，則重新賦值訊息，及移動距離 if (0 == cur_top + msg_height) { console.log('已經移完了,開始下一次') cur_top = 0; } $('#div_msg').css('top', cur_top + 'px'); } setInterval("scrollme()", 20); </script> </body> </html>