漂浮广告效果(原生JS)

实现广告漂浮效果思路:

1.绝对定位

2 .获取广告在可视区域的最大宽高,找漂浮时(left,top)的变化规律

2.获取元素位置(left、top)

3.设置新位置值(left,top)

4.将新值赋值给元素

5.根据漂浮规律结合定时器实现漂浮效果

6.结合鼠标移入移出事件来停止启动定时器。

7.广告关闭,即点击事件触发隐藏效果(display = ‘none’;)

效果:

广告漂浮效果

小窗口中效果

代码如下:

样式

如有问题欢迎交流。

如转载请注明出处,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 817评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,523评论 25 708
  • 一 X型理论假设,人类会逃避努力,只为金钱和安全感而工作,因此他们需要被控制。而Y型理论假设,对人类来说,工作与游...
    余悦六六六阅读 762评论 0 5
  • 二货媳妇:“我们以后生三个孩子吧。” 二货哥:“唉,两个就足够了。” 二货媳妇:“三个!” 二货哥:“不行,两个!...
    老罗xt阅读 1,381评论 0 1