JavaScript implements simple scroll window

This article example shares the specific code of JavaScript to implement the scroll window for your reference. The specific content is as follows

1. Implementation effect diagram

2. Knowledge points involved

The window.open() method is used to open a new browser window or find a named window.

moveTo(): The method can move the upper left corner of the window to a specified coordinate.

window.screen.height: screen pixel height

window.screen.width: the width of the screen in pixels

window.screenLeft; The distance from the left side of the screen

window.screenTop; the distance from the top to the screen

setTimeout: The method is used to call a function or calculate an expression after a specified number of milliseconds, setTimeout(function, milliseconds).

3. Code Implementation

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="UTF-8">
    <title>Scrolling Window</title>
    <script>  
        var w ;//page width var h;//page height var x;//horizontal distance from the screen var y;//vertical distance from the screen var v = 5;//horizontal position of each movement var s = 8;//vertical position of each movement function windowOpen(){
        mywindow = window.open('','','width=200px,height=100px');
        mywindow.document.write("This is an open window");
           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="Open window" id="windowOpen" onclick="windowOpen()">
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements displaying/hiding window fixed position elements as the page scrolls
js+css to realize the mask centered pop-up layer (scrolling with the browser window scroll bar)
javascript window width and height, mouse position, scroll height (detailed analysis)
JavaScript gets the scroll position code of the modal window
js/jquery obtains the browser window visible area height and width and scroll bar height implementation code
JavaScript uses DIV to simulate pop-up windows_form scrolling follows

<<: Practical method of upgrading PHP to 5.6 in Linux

>>: Explanation of the problem of selecting MySQL storage time type