js方法:
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>
基本思路:
1.页面加载完成之后向页面插入窗口,之后向窗口插入关闭按钮
2.使用setInterval()函数触发moves()函数开始动画
3.moves函数:首先获取当前窗口位置,之后随时间使窗口位移,每当位移到游览器边缘时反向运动
4.添加其他事件:鼠标悬停停止运动,鼠标离开继续运动,点击按钮关闭窗口
ps:不建议使用这个特效,影响用户体验
希望对你有所帮助!^_^!~~