javascript实现滚动窗口

红太狼 2022-04-18 03:10 269阅读 0赞

一.实现的效果图

![20181107180155309.gif][]

二.涉及到的知识点

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>

[20181107180155309.gif]: /images/20220418/1956ed20d74f4f31aae56a9a518dd5d0.png