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

我们在浏览网页的时候，有时会看到一直在屏幕动的很烦人的广告，它会游走于整个页面，直到碰到边缘框才换方向。我称它为牛皮癣广告。
下面我们用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，后面是不同的数字。如下图:

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

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

最后我们来看一下效果：

来写一个讨人厌牛皮癣的广告相关推荐

用C++写一个三人表决器
昨天离散数学老师布置了一道编程题: 设计并编程实现一个3人表决开关电路.设三个裁判分别为A.B.C,有两个及以上裁判同意,则通过表决:否则,未通过表决.同意与否通过键盘输入,可以用0.1或T.F表示. ...
用小程序云开发写一个多人记账小程序
应女朋友要求,用小程序云开发写一个记账小程序,适合情人记账.家庭记账.团队记账.多人记账的小程序先上成品图吧主页: 记账页: 详情页: 个人中心页: 统计页: 其余的页面就不一一展示了,使用到的主 ...
用JS写右下角烦人的弹窗小广告
啦啦啦啦,写一下最近JS的学习进度. 最近JS学了DOM.正则.定时器- 用定时器写了一个右下角的弹窗广告. 先写一下定时器的基本概念周期定时器:setInterval(function,每间隔多少 ...
如何设计一个不讨人厌的AI？“恐怖谷”了解一下
随着AI时代的到来,越来越多的智能设备进入了我们的生活.它们在给我们带来更多功能和便利的同时,也被赋予了更多"人性化"的特征,比如能说会动,有人格有情绪,甚至会思考. 面对这么多越 ...
用C++写一个没人用的ECS
github地址:https://github.com/yangrc1234/Resecs 在做大作业的时候自己实现了一个简单的ECS,起了个名字叫Resecs. 这里提一下一些实现的细节,作为回顾. ...
一分钟学会如何写一个让人有点击欲望的自媒体文章标题
文章的标题和首图就决定了文章的用户的阅读量.内容再好,标题和首图没吸引力= 白费功夫!所以标题和首图直接关系到用户有没有点开这篇文章的欲望!下面介绍热门标题的五个重要元素数字:常见公式是数字+好处 ...
html一排小标题怎么写,如何写标题吸引人，100个优美小标题推荐
我们自媒体人都知道标题的重要性,一个好的标题可以给我们带来巨大的流量,如果你想写一个吸引人的标题的话,可以按照下面的方法来写. 1.经历型标题经历型标题是指通过实践得出的经验然后分享,这类标题获得用 ...
打印工资条怎么做到每个人都有表头明细_朋友说：能不能用python，帮我写一个“制作工资条”的自动化程序？...
本文说明今天和一个朋友吃饭,她说我经常使用Excel制作工资条,但是每个月都要做一遍,你能不能用python写一个代码,能够自动化完成这个工作.这当然可以啦,就是这么牛逼! 我们先来看看原始数据是什 ...
如何彻底解决烦人的 MySQL 分库分表问题？写一个更好的数据库！
作者 | 黄东旭责编 | 郭芮我还清楚记得,五年前的这个时候,当时还在豌豆荚,午后与刘奇和崔秋的闲聊关于未来数据库的想象,就像一粒种子一样,到了今天看起来也竟枝繁叶茂郁郁葱葱,有点感慨.按照 ...

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

Html代码

js代码

来写一个讨人厌牛皮癣的广告相关推荐

最新文章

热门文章