JS implements the special effects of suspended mobile windows (suspended advertising)

js method:

Copy the codeThe code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
    <head>
        <title> New Document </title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <script type="text/javascript">
            =function(){
//Write
                var oneInner = ("div");
                ("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");
                var oneButton = ("input");
                ("type","button");
                ("value","x");
                if ()
                {
                    ="right"
                }
                else
                {="right"}
                (oneButton);
                (oneInner);

//Timer
                var a1a = setInterval(moves,100);
//Function

var x = 10;
var y = 10;

                function moves(){
                    var tops =
                    var lefts =

                    if (lefts>=||lefts<=0)
                    {
                        x=-x
                    }

                    if (tops>=||tops<=0)
                    {
                        y=-y
                    }

                    tops+=y;
                    lefts+=x;

                    =tops+"px"
                    =lefts+"px"
                }

//Hoom stop
                =function(){
                    clearInterval(a1a);
                }
//Let go and continue to exercise
                =function(){
                    a1a =setInterval(moves,100);
                }
//delete
                =function(){
                    (oneInner);
                }
            }
        </script>

</head>

<body>

</body>
</html>

jquery method:

Copy the codeThe code is as follows:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="https:///workspace/js/jquery-1."></script>
        <script>
            $(function(){
//Write to div
                $("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");
//Write close button
                $("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");
//Timer
                var move = setInterval(moves,100);
                var x= 10;
                var y= 10;

                function moves (){
                    var mw = $("#moveWindow").offset();
                    var lefts =;
                    var tops = ;

                    if (lefts>=$(window).width()-$("#moveWindow").width()||lefts<=0)
                    {
                        x=-x
                    }

                    if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0)
                    {
                        y=-y
                    }
                    lefts+=x;
                    tops+=y;

                    $("#moveWindow").offset({top:tops,left:lefts});

                }
//Hoom stops movement
                $("#moveWindow").mouseover(function(){
                    clearInterval(move);
                });
//Remove movement after removing the mouse
                $("#moveWindow").mouseout(function(){
                    move = setInterval(moves,100);
                });
//Click the button to close
                $("#removeMW").click(function(){
                    $("#moveWindow").remove();
                });
            })
        </script>
    </head>
    <body>
    </body>
</html>

Basic ideas:

1. After the page is loaded, insert the window into the page, and then insert the close button into the window.

2. Use the setInterval() function to trigger the moves() function to start animation

Function: First get the current window position, then move the window over time, and move in reverse whenever it moves to the edge of the browser

4. Add other events: the mouse hover stops movement, the mouse leaves and continues to move, click the button to close the window

ps: This special effect is not recommended, which affects the user experience

Hope it helps you! ^_^!~~