首页 > web前端 > js教程 > JS实现悬浮移动窗口(悬浮广告)的特效_javascript技巧

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

WBOY
发布: 2016-05-16 17:40:38
原创
1699 人浏览过

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>
   
   
   

基本思路:

1.页面加载完成之后向页面插入窗口,之后向窗口插入关闭按钮

2.使用setInterval()函数触发moves()函数开始动画

3.moves函数:首先获取当前窗口位置,之后随时间使窗口位移,每当位移到游览器边缘时反向运动

4.添加其他事件:鼠标悬停停止运动,鼠标离开继续运动,点击按钮关闭窗口

ps:不建议使用这个特效,影响用户体验

希望对你有所帮助!^_^!~~

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板