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

   
       
       
       
       
       
       

   

   

   

   
       
       
       
        <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>