javascript實現滾動視窗
阿新 • • 發佈:2018-12-20
一.實現的效果圖
二.涉及到的知識點
window.open();方法用於開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。
moveTo():方法可把視窗的左上角移動到一個指定的座標。
window.screen.height:螢幕畫素的高度
window.screen.width:螢幕畫素的寬度
window.screenLeft;左邊距離螢幕的距離
window.screenTop;上面距離螢幕的距離
setTimeout:方法用於在指定的毫秒數後呼叫函式或計算表示式,setTimeout(function, milliseconds)。
三.程式碼實現
<!DOCTYPE html> <html lang="utf-8"> <head> <meta charset="UTF-8"> <title>滾動視窗</title> <script> var w ;//頁面的寬度 var h;//頁面的高度 var x;//距離螢幕水平位置 var y;//距離螢幕垂直的位置 var v = 5;//每次水平移動的位置 var s = 8;//每次垂直移動的位置 function windowOpen(){ mywindow =window.open('','','width=200px,height=100px'); mywindow.document.write("這個是開啟的視窗"); w =window.screen.width; h=window.screen.height; x=window.screenLeft; y=window.screenTop; windowmove(); } function windowmove(){ if(x<0||x>w){ s=-s; } x=x+s; if(y<0||y>h){ v=-v; } y=y+v; mywindow.moveTo(x,y); setTimeout(windowmove,10); } </script> </head> <body> <input type="submit" value="開啟視窗" id="windowOpen" onclick="windowOpen()"> </body> </html>