Realization method of floating window

Floating window is the window floating around on the page. To achieve this effect, you need to change the distance between the div and the left side of the browser.
html part:

<div id="floatWindow">
   <div class="title">
       <a href="https://Www.baidu, com "target =" _blank "title =" Trinity enrollment ">
           <img src="../img/floatwindow.jpg"> //There is only one picture in the window as the content
       </a>
   </div>
   <div class="close">
       <p>×Close</p>
   </div>
</div>

Part css:

#floatWindow{
    width: 240px;
    height: 160px;
    position: absolute;  
    z-index: 9999;  //Let the window float on the top
}

#floatWindow .title img{
    width: 240px;
    height: 140px;
}

#floatWindow .close{
    text-align: right;
    width: 240px;
    cursor: pointer;
}

Design sketch:

Part js:

var floatWindow = document.getElementById("floatWindow"); //Get window div

//Position change of window
var step_x = 1;  //Each moving distance of window in x-axis direction
var step_y = 1;  //Moving distance of window in y-axis direction
//Defined function
function windowFloat() {
    var x = floatWindow.offsetLeft;  //Get the distance from the window to the left
    var y = floatWindow.offsetTop;   //Get the distance above the window
    var x_win = window.innerWidth;   //Get the width of the browser window
    var y_win = window.innerHeight;  //Get height of browser window

    x += step_x;
    y += step_y;
    if (x <= 0 || x >= x_win - floatWindow.offsetWidth) { //Judge whether the float window touches the leftmost or rightmost side, and change the moving direction if it touches
        step_x *= -1;
        x += step_x;
    }
    if (y <= 0 || y >= y_win - floatWindow.offsetHeight) { //Judge whether the float window touches the top or bottom edge, and change the moving direction when it touches
        step_y *= -1;
        y += step_y;
    }

    floatWindow.style.left = x + "px";
    floatWindow.style.top = y + "px";
}

var timeId2=setInterval(windowFloat, 10);

//Floating window stops moving when mouse is over it
floatWindow.onmouseover = function () {
    clearInterval(timeId2);
}

//The window starts to move after the mouse leaves
floatWindow.onmouseout = function () {
    timeId2=setInterval(windowFloat, 10);   //Be sure to name the id value returned by this timer as the variable name in the clear timer
}

//Closing window
$(document).ready(function () {
    $(".close").click(function () {
        $("#floatWindow").hide();
    });
});

Summary of other small problems:
1. Many variables are often used when making a web page's js. It should be noted that duplicate names are not allowed. At this time, errors may not be reported, but the results are often incorrect;
2. The relative and absolute attributes of position attribute should be distinguished and used reasonably;
3. The grasp of some details is not enough. For example, z-index needs to be used with position to be effective, and these details need to be strengthened;