1. 程式人生 > >javascript實現滾動視窗

javascript實現滾動視窗

一.實現的效果圖

 

二.涉及到的知識點

    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>