JQuery网页飘窗

我不是女神ヾ 2022-12-20 08:52 110阅读 0赞

## HTML结构 ##

**body：**

<div class="float-container" id="ad1" style="position: absolute; left: 379px; top: 108px;"> <a href="#" title="" target="_blank"> <img src="images/pc1.png" alt=""> </a>
      <p class="ad1-close">关闭</p>
    </div>
    <style>
        .float-container {
          position: relative;
          z-index:99999999999999999999;
        }
    
        .float-container p {
          text-align: right;
          position: absolute;
          margin: 0;
          top: -25px;
          right: 0;
          cursor: pointer;
        }
      </style>
    <script>
        $(function () {
          var ad1 = new AdMove("ad1", true);
          ad1.Run();
    
          $('.ad1-close').on('click', function () {
            $(this).parent().remove()
          });
        })
    
      </script>

## 引入外部JS文件 ##

<script type="text/javascript" src="images/jquery-1.8.1.min.js"></script>

*

<script type="text/javascript" src="images/AdMove.js"></script>

*

**AdMove.js**

function addEvent(obj, evtType, func, cap) {//obj：dom操作对象，evtType：对象绑定的事件，func：触发的函数
      cap = cap || false;
      if (obj.addEventListener) {
        obj.addEventListener(evtType, func, cap);
        return true;
      } else if (obj.attachEvent) {
        if (cap) {
          obj.setCapture();
          return true;
        } else {
          return obj.attachEvent("on" + evtType, func);
        }
      } else {
        return false;
      }
    }
    function getPageScroll() {//获取滚动条滚动的距离（分别使用不同的浏览器）
      var xScroll, yScroll;
      if (self.pageXOffset) {//获取页面相对于窗口显示区左上角的 X 位置
        xScroll = self.pageXOffset;
      } else if (document.documentElement && document.documentElement.scrollLeft) {
        xScroll = document.documentElement.scrollLeft;//获取页面的水平滚动条的位置
      } else if (document.body) {
        xScroll = document.body.scrollLeft;//获取页面的水平滚动条的位置
      }
      if (self.pageYOffset) {//获取页面相对于窗口显示区左上角的 Y 位置。
        yScroll = self.pageYOffset;
      } else if (document.documentElement && document.documentElement.scrollTop) {
        yScroll = document.documentElement.scrollTop;//获取页面垂直方向滚动的值
      } else if (document.body) {
        yScroll = document.body.scrollTop;
      }
      arrayPageScroll = new Array(xScroll, yScroll);
      return arrayPageScroll;//返回当前页面滚动条距离左边和上边的距离
    }
    function GetPageSize() {//获取页面位置以及窗口大小
      var xScroll, yScroll;
      if (window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;//网页正文全文宽
        yScroll = window.innerHeight + window.scrollMaxY;//
      } else if (document.body.scrollHeight > document.body.offsetHeight) {
        xScroll = document.body.scrollWidth;//获取浏览器页面可见的区域宽度
        yScroll = document.body.scrollHeight;
      } else {
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
      }
      var windowWidth, windowHeight;
      if (self.innerHeight) {
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
      } else if (document.documentElement && document.documentElement.clientHeight) {
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
      } else if (document.body) {
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
      }
      if (yScroll < windowHeight) {
        pageHeight = windowHeight;
      } else {
        pageHeight = yScroll;
      }
      if (xScroll < windowWidth) {
        pageWidth = windowWidth;
      } else {
        pageWidth = xScroll;
      }
      arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
      return arrayPageSize;
    }
    //广告脚本文件 AdMove.js
    
    
    var AdMoveConfig = new Object();
    AdMoveConfig.IsInitialized = false;
    AdMoveConfig.ScrollX = 0;
    AdMoveConfig.ScrollY = 0;
    AdMoveConfig.MoveWidth = 0;
    AdMoveConfig.MoveHeight = 0;
    AdMoveConfig.Resize = function () {
      var winsize = GetPageSize();//获取的是页面显示内容的宽和高
      AdMoveConfig.MoveWidth = winsize[2];
      AdMoveConfig.MoveHeight = winsize[3];
      AdMoveConfig.Scroll();
    };
    AdMoveConfig.Scroll = function () {
      var winscroll = getPageScroll();//获取页面滚动条的位置
      AdMoveConfig.ScrollX = winscroll[0];
      AdMoveConfig.ScrollY = winscroll[1];
    };
    addEvent(window, "resize", AdMoveConfig.Resize);
    addEvent(window, "scroll", AdMoveConfig.Scroll);
    function AdMove(id) {
      if (!AdMoveConfig.IsInitialized) {
        AdMoveConfig.Resize();
        AdMoveConfig.IsInitialized = true;
      }
      var obj = document.getElementById(id);
      obj.style.position = "absolute";
      var W = AdMoveConfig.MoveWidth - obj.offsetWidth;
      var H = AdMoveConfig.MoveHeight - obj.offsetHeight;
      var x = W * Math.random(), y = H * Math.random();//random() 方法可返回介于 0 ~ 1 之间的一个随机数
      var rad = (Math.random() + 1) * Math.PI / 6;
      var kx = Math.sin(rad), ky = Math.cos(rad);//取X和Y的精确值
      var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);
      var step = 1;
      var interval;
      this.SetLocation = function (vx, vy) { x = vx; y = vy; }
      this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }
      obj.CustomMethod = function () {
        obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
        obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
        rad = (Math.random() + 1) * Math.PI / 6;
        W = AdMoveConfig.MoveWidth - obj.offsetWidth;
        H = AdMoveConfig.MoveHeight - obj.offsetHeight;
        x = x + step * kx * dirx;
        if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
        if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }
        y = y + step * ky * diry;
        if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
        if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }
      };
      this.Run = function () {
        var delay = 10;
        interval = setInterval(obj.CustomMethod, delay);//每隔delay调用一下obj.CustomMethod函数
        obj.onmouseover = function () { clearInterval(interval); }//当鼠标移动到obj上时，停止取消由 setInterval() 设置的 timeout
        obj.onmouseout = function () { interval = setInterval(obj.CustomMethod, delay); }//当鼠标从obj上移开的时，冲洗开始调用obj.CustomMethod函数·
      }
    }

效果如下：

![在这里插入图片描述][20200519091047825.gif]

[20200519091047825.gif]: /images/20221120/4286d46764bd4bbdbaf78472ead99777.png

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关网页飘窗（找个位置随便放）

*初始位置：上、左*///自己添加的，官方没有。/*选定漂浮元素*//*鼠标移入移出*/

曾经终败给现在/ 2024年04月26日 03:37/ 0 赞/ 64 阅读

相关 vue飘窗效果（css飘窗效果，跟随页面滚动）

简述：飘窗效果，相信大家都见过，一般用于官网页面，下面给大家整理了下，飘窗效果在vue中的使用，效果图如下； ![bc01fa64861b47499b8c32269b08

妖狐艹你老母/ 2023年10月04日 22:03/ 0 赞/ 43 阅读

相关 JQuery网页飘窗

HTML结构 body： <div class="float-container" id="ad1" style="position: absolute; le

我不是女神ヾ/ 2022年12月20日 08:52/ 0 赞/ 111 阅读

相关网页图片飘起来

javascript:R = 0 ; x1 = . 1 ; y1 = . 05 ; x2 = . 25 ; y2 = . 24 ; x3 = 1.6 ; y3 = . 24 ;

快来打我*/ 2022年09月19日 01:47/ 0 赞/ 151 阅读

相关 SweetAlert2网页弹窗---JAVASCRIPT弹窗

一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗，无任何依赖中文文档地址:[http://mishengqiang.com/swe

ゞ浴缸里的玫瑰/ 2022年09月04日 14:53/ 0 赞/ 291 阅读

相关网页弹窗代码特效大全

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特

谁践踏了优雅/ 2022年07月11日 15:56/ 0 赞/ 442 阅读

相关网页前台页面图片飘窗代码

[网页前台页面图片飘窗代码][Link 1]  <div id="img1" style="z-index:

╰+攻爆jí腚メ/ 2022年04月24日 05:02/ 0 赞/ 310 阅读

相关 “联系我们”飘窗实现

1、点击飘窗随机选择客服QQ进行联系 <style type="text/css"> moveWindow { width: 170px;

我就是我/ 2022年03月01日 00:05/ 0 赞/ 157 阅读

相关网页弹窗

layer 强烈推荐 [layer官方演示与讲解（jQuery弹出层插件）][layer_jQuery] 手动实现警告框最不推荐的 $(".close"

一时失言乱红尘/ 2022年02月02日 12:43/ 0 赞/ 373 阅读

相关 jQuery--窗体弹窗效果

前言内容显示效果： HTML代码： CSS代码： J

àì夳堔傛蜴生んèń/ 2021年09月27日 05:02/ 0 赞/ 457 阅读