Home > Article > Web Front-end > JS implements the special effects of floating mobile windows (floating advertisements)

JS implements the special effects of floating mobile windows (floating advertisements)

高洛峰Original: 2017-02-04 14:21:533268browse

js method:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">
            window.onload=function(){
                //写入
                var oneInner = document.createElement("div");
                oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");
                var oneButton = document.createElement("input");
                oneButton.setAttribute("type","button");
                oneButton.setAttribute("value","x");
                if (oneButton.style.cssFloat)
                {
                    oneButton.style.cssFloat="right"
                }
                else
                {oneButton.style.styleFloat="right"}
                oneInner.appendChild(oneButton);
                document.body.appendChild(oneInner);

                //定时器
                var a1a = setInterval(moves,100);
                //函数
                var x = 10;
                var y = 10;
                function moves(){
                    var tops = oneInner.offsetTop
                    var lefts = oneInner.offsetLeft
                    if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts<=0)
                    {
                        x=-x
                    }
                    if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)
                    {
                        y=-y
                    }

                    tops+=y;
                    lefts+=x;
                    oneInner.style.top=tops+"px"
                    oneInner.style.left=lefts+"px"
                }
                //悬停停止
                oneInner.onmouseover=function(){
                    clearInterval(a1a);
                }
                //放手继续运动
                oneInner.onmouseout=function(){
                    a1a =setInterval(moves,100);
                }
                //删除
                oneButton.onclick=function(){
                    document.body.removeChild(oneInner);
                }
            }
        </script>
    </head>
    <body>

    </body>
</html>

jquery method:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.jb51.net/workspace/js/jquery-1.7.min.js"></script>
        <script>
            $(function(){
                //写入div
                $("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");
                //写入关闭按钮
                $("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");
                //定时器
                var move = setInterval(moves,100);
                var x= 10;
                var y= 10;

                function moves (){
                    var mw = $("#moveWindow").offset();
                    var lefts =mw.left;
                    var tops = mw.top;
                    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});

                }
                //悬停停止运动
                $("#moveWindow").mouseover(function(){
                    clearInterval(move);
                });
                //移开鼠标后继续运动
                $("#moveWindow").mouseout(function(){
                    move = setInterval(moves,100);
                });
                //点击按钮关闭
                $("#removeMW").click(function(){
                    $("#moveWindow").remove();
                });
            })
        </script>
    </head>
    <body>
    </body>
</html>

Basic idea:

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

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

3. The moves function: first obtain the current window position, and then displace the window over time, whenever it moves to the edge of the browser Reverse motion

4. Add other events: stop the movement when the mouse hovers, continue the movement when the mouse leaves, click the button to close the window

ps: It is not recommended to use this special effect, which affects the user experience

Hope it helps! ^_^!~~

For more articles related to the special effects of JS implementing floating mobile windows (suspended advertisements), please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements the effect of the advertising box in the lower right cornerNext article：JavaScript implements the effect of the advertising box in the lower right corner

See more

JS implements the special effects of floating mobile windows (floating advertisements)

Related articles