欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-02 08:43:10
...
js方法:

复制代码 代码如下:




New Document







jquery方法:

复制代码 代码如下:












基本思路:

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

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

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

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

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

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