来写一个讨人厌牛皮癣的广告

来写一个讨人厌牛皮癣的广告用js写一个牛皮癣广告

我们在浏览网页的时候,有时会看到一直在屏幕动的很烦人的广告,它会游走于整个页面,直到碰到边缘框才换方向。我称它为牛皮癣广告
下面我们用js原生来写这样一个牛皮癣的广告。

Html代码

<img src="img/img04.jpg" id='demo' class="demo" alt="" /> <!-- 随便找一个图片 -->

js代码

<script>
  function $(str) {
    return document.getElementById(str);
  }

  function move() {

    //0 代表向右移动 1代表向左移动
    var leftState = 0;
    var topState = 0;

    setInterval(function() {
      var left = parseInt($('demo').style.left);
      left = isNaN(left) ? 0 : left;

      var winW = window.innerWidth;
      //如果左移动的下次距离 大于浏览器的宽度
      //左边距-图片的宽度+下次运行的距离>浏览器宽度
      if (left - 2 > 0 && leftState == 1) {
        $('demo').style.left = left - 2 + 'px';
      } else if ((left + 100 + 2) < winW && leftState == 0) {
        $('demo').style.left = left + 2 + 'px';
      } else if ((left + 100 + 2) >= winW && leftState == 0) {
        leftState = 1;
      } else if (left - 2 <= 0 && leftState == 1) {
        leftState = 0;
      }

      var top = parseInt($('demo').style.top);
      top = isNaN(top) ? 0 : top;
      var winH = window.innerHeight;
      //如果左移动的下次距离 大于浏览器的宽度 
      //左边距-图片的宽度+下次运行的距离>浏览器宽度
      if (top - 2 > 0 && topState == 1) {
        $('demo').style.top = top - 2 + 'px';
      } else if ((top + 100 + 2) < winH && topState == 0) {
        $('demo').style.top = top + 2 + 'px';
      } else if ((top + 100 + 2) >= winH && topState == 0) {
        topState = 1;
      } else if (top - 2 <= 0 && topState == 1) {
        topState = 0;
      }
    }, 20)
  }

  window.onload = function() {
    move();
  }
  </script>

var left = parseInt($('demo').style.left);
left是左移动的距离,console.log的结果一开始是NaN,后面是不同的数字。如下图:
console.log(left);

window.innerWidth返回窗口的文档显示区的宽度。
window.innerheight返回窗口的文档显示区的高度。
更多window对象相关可参考Window 对象

其实原理很简单,就是利用了广告与窗口的距离,与窗口的宽度相比较,从而确定下一步广告与窗口的距离,形成移动的效果。

最后我们来看一下效果:

效果

今天的文章来写一个讨人厌牛皮癣的广告分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/60457.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注