JS实现悬浮移动窗口(悬浮广告)的特效_javascript技巧-js教程-PHP中文网

JS实现悬浮移动窗口(悬浮广告)的特效_javascript技巧

php中文网

发布： 2016-05-16 17:40:38

原创

1856人浏览过

js方法：

复制代码代码如下:

        New Document

jquery方法：

复制代码代码如下:

    
        <script><BR>            $(function(){<BR>                //写入div<BR>                $("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");<BR>                //写入关闭按钮<BR>                $("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");<BR>                //定时器<BR>                var move = setInterval(moves,100);<BR>                var x= 10;<BR>                var y= 10;<br><br>                function moves (){<BR>                    var mw = $("#moveWindow").offset();<BR>                    var lefts =mw.left;<BR>                    var tops = mw.top;
<P>                    if (lefts>=$(window).width()-$("#moveWindow").width()||lefts<=0)<BR>                    {<BR>                        x=-x<BR>                    }
<P>                    if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0)<BR>                    {<BR>                        y=-y<BR>                    }<BR>                    lefts+=x;<BR>                    tops+=y;<br><br>                    $("#moveWindow").offset({top:tops,left:lefts});<br><br>                }<BR>                //悬停停止运动<BR>                $("#moveWindow").mouseover(function(){<BR>                    clearInterval(move);<BR>                });<BR>                //移开鼠标后继续运动<BR>                $("#moveWindow").mouseout(function(){<BR>                    move = setInterval(moves,100);<BR>                });<BR>                //点击按钮关闭<BR>                $("#removeMW").click(function(){<BR>                    $("#moveWindow").remove();<BR>                });<BR>            })<BR>        </script>

基本思路：