<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->

    <style type="text/css">

        html,

        body

        {

            margin: ;

            padding: ;

        }

        div

        {

            font-size: 30px;

            font-weight: bold;

            position: fixed;

            display: flex;

            width: 200px;

            height: 200px;

            color: white;

            border-radius: %;

            background: red;

            justify-content: center;

            align-items: center;

        }

        div

        {

            /* Firefox */

            -webkit-animation: rotate 5s linear infinite;

               -moz-animation: rotate 5s linear infinite;

            /* Safari 和 Chrome */

                 -o-animation: rotate 5s linear infinite;

                    animation: rotate 5s linear infinite;

            /* Opera */

        }

        @keyframes rotate

        {

            %

            {

                /* Firefox */

                -webkit-transform: rotate(0deg);

                /* IE 9 */

                   -moz-transform: rotate(0deg);

                    -ms-transform: rotate(0deg);

                /* Safari 和 Chrome */

                     -o-transform: rotate(0deg);

                        transform: rotate(0deg);

                /* Opera */

            }

            %

            {

                /* Firefox */

                -webkit-transform: rotate(360deg);

                /* IE 9 */

                   -moz-transform: rotate(360deg);

                    -ms-transform: rotate(360deg);

                /* Safari 和 Chrome */

                     -o-transform: rotate(360deg);

                        transform: rotate(360deg);

                /* Opera */

            }

        }

    </style>

</head>

<body>

    <div id="ad">Hello, world!</div>

</body>

</html>

<script type="text/javascript">
    let el = document.querySelector('#ad');
    let styleTop = 0;
    let styleLeft = 0;
    let verticalFlag = true;
    let horizontalFlag = true;
    setInterval(() => {
      (el.offsetHeight + styleTop === window.innerHeight) && (verticalFlag = false);
      (el.offsetWidth + styleLeft === window.innerWidth) && (horizontalFlag = false);
      verticalFlag ? styleTop++ : styleTop--;
      horizontalFlag ? styleLeft++ : styleLeft--;
      (styleTop <= 0) && (verticalFlag = true);
      (styleLeft <= 0) && (horizontalFlag = true);
      el.style.top = `${styleTop}px`;
      el.style.left = `${styleLeft}px`;
    }, 10);
</script>

HTML5 网页 漂浮窗广告 JavaScript逻辑 - demo的更多相关文章

  1. 微信网页悬浮窗交互效果的web实现

    一.微信的悬浮窗交互效果 微信更新后,发现多了个悬浮窗功能.公众号阅读,网页浏览回退后默认会出现.再点击,可以回到刚才阅读的地方.于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了 ...

  2. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  3. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  4. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  5. 20款响应式的 HTML5 网页模板【免费下载】

    下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  7. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  9. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

随机推荐

  1. Debian9安装桌面环境

    更新安装源 apt-get update 安装 x-window apt-get install x-window-system-core 安装 gnomeapt-get install gnome- ...

  2. Python基础 - 总则

    学习Python的笔记,有基础语法,有注意点.仅此而已. 目录: ------------------------------------------- Python基础(1) - 初识Python ...

  3. Intellij Idea快捷鍵

    一.视图查看 Ctrl+F12 查看file,method结构图.类继承机构图 (不知道方法结构,Ctrl+F12一下,方法,参数,返回值,一清二楚的展现出来) Ctrl+shift+Alt+U   ...

  4. [转]SSRS: Checking for Divide By Zero Using Custom Code

    本文转自:http://salvoz.com/blog/2011/11/25/ssrs-checking-for-divide-by-zero-using-custom-code/ I encount ...

  5. MyBatis中插入并返回主键

    开发过程中经常遇到需要插入一条数据,并且返回这条数据自增的主键,在MyBatis中只需要在mapper中添加keyProperty属性即可 在mapper中添加keyProperty属性 <in ...

  6. 使用sql语句备份一张表

    如何使用sql语句复制一张表? 方法一:第一步:先建一张新表,新表的结构与老表相等. create table newtable like oldtable; 第二步:将老表中的值复制到新标中. in ...

  7. 一步一步实现web程序信息管理系统之三----登陆业务逻辑实现（验证码功能+参数获取）

    本篇紧接着上一篇文章[一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面] 验证码功能 一般验证码功能实现方式为,前端界面访问一个url请求,后端服务代码生成一个图片流返回至浏览器 ...

  8. HDU3629：Convex

    传送门 求凸四边形的个数 转化成总数减去凹四边形的个数 凹四边形一定是一个三角形中间包含的另外一个点 那么枚举被包含的点,其它的对于这个点极角排序 被包含不好算,算总数减去不被包含的 枚举三角形的一个 ...

  9. 微服务架构之spring cloud 介绍

    在当前的软件开发行业中,尤其是互联网,微服务是非常炽热的一个词语,市面上已经有一些成型的微服务框架来帮助开发者简化开发工作量,但spring cloud 绝对占有一席之地,不管你是否为java开发,大 ...

  10. FineReport如何手动推送APP消息

    在报表填报成功后,发送消息至APP会提示数据已更新.再次期间用户需要有查看该模板的权限,如果没有的话,则无法接受到提示信息.那么在FineReport移动端中,如何手动推送APP消息呢? 具体用法 在 ...