最近做个小项目，给网页加个浮窗，考验了基础的css,js技术，还是蛮有意思的，代码如下（部分代码来源于引用，见底部）

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    *{

        padding: 0;

        margin: 0;

    }

    body {

        height: 900px;

		background-color: white;

    }

    .fl {

        width: 200px;

        height: 100px;

        background-color:white;

        position: fixed;

    }

div

{

	    border-style:solid;

	    border-top-color:#84C1FF;

	    border-top-width:22px;

}

</style>

<body>

    <div class="fl" id="fl">

	<b>注意:</b>  "border-top-width" 单独使用没有效果. 要先使用 "border-style" 属性设置 borders.

    </div>

</body>

<script language=javascript>

var fl = document.getElementById('fl');

var chroX = document.documentElement.clientWidth;//yemian整个的高宽

var chroY = document.documentElement.clientHeight;

var offsetLeft = fl.offsetLeft;//盒子的位置

var offsetTop = fl.offsetTop;

var timer = 0;//起始秒表为0

//console.log(offsetTop)

var x = 1;//每次移动一

var y = 1;

window.onresize = function(){

    chroX = document.documentElement.clientWidth;//yemian整个的高宽

    chroY = document.documentElement.clientHeight;

}

function move(){

    offsetLeft += x;

    offsetTop += y;

    fl.style.left = offsetLeft  + 'px';

    fl.style.top = offsetTop  + 'px';

    //console.log(chroY)

}

window.onload = function(){

   timer = setInterval(function(){

        move();

        if(offsetTop+200 > chroY || offsetTop < 0){

            y = -y;

        }

        if(offsetLeft+200 > chroX || offsetLeft <0){//如果离网页边框不到200就反方向移动

            x = -x;

        }

    },30)//调整速度，间隔（数字）越大越慢

}

fl.onmouseenter = function(){

    clearInterval(timer)  //鼠标放在浮窗上就停止移动

}

fl.onmouseleave = function(){//鼠标移开重新开始移动

    window.onload();

}

</script>

</html>

　　

大体思路就是设定一个计时器，每到一个时间就重新显示一次窗口，因为你的坐标不同，而且刷新的时间是以毫秒为单位在进行，所以就显示出了一种浮窗的效果。

引用：https://blog.csdn.net/qq_22849785/article/details/93596680

JavaScript自学笔记（3）--- 用JS来实现网页浮窗的更多相关文章

  1. JavaScript自学笔记（1）---表单验证，let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  2. 高性能javascript学习笔记系列(1) -js的加载和执行

    这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...

  3. JavaScript自学笔记（2）---function a(){} 和 var a = function(){}的区别（javascript)

    function a(){} 和 var a = function(){}的区别: 学习做浮窗,看到别人的代码里有: window.onresize = function(){ chroX = doc ...

  4. JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  6. JS自学笔记01

    JS自学笔记01 1.开发工具 webstorm 2.js(javascript) 是一门脚本.解释性.动态类型.基于对象的语言 含三个部分: ECMAScript标准–java基本语法 DOM(Do ...

  7. Node.js自学笔记之回调函数

    写在前面:如果你是一个前端程序员,你不懂得像PHP.Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择.这段时间对node.js进行了简单的学习,在这里 ...

  8. JS自学笔记05

    JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...

  9. JS自学笔记04

    JS自学笔记04 arguments[索引] 实参的值 1.对象 1)创建对象 ①调用系统的构造函数创建对象 var obj=new Object(); //添加属性.对象.名字=值; obj.nam ...

随机推荐

  1. 理解numpy中ndarray的内存布局和设计哲学

    目录 ndarray是什么 ndarray的设计哲学 ndarray的内存布局 为什么可以这样设计 小结 参考 博客:博客园 | CSDN | blog 本文的主要目的在于理解numpy.ndarra ...

  2. ros之发布者和订阅者协同工作

    前面的例子显示了单个发布者/单个订阅者的情况,但是一个节点也可以同时是一个发布者和订阅者,或者拥有多个订阅和发布. 实际上,ROS节点最常做的事情是传递消息,并在消息上进行运算. 例doubler.p ...

  3. git远程上传文件至github

    一.本地安装和配置git 1.安装git pacman -S git //如果没有问题的话就可以安装成功了 2.验证 git --version //看到结果git version 2.10.2就可以 ...

  4. CCF_201612-4_交通规划

    http://115.28.138.223/view.page?gpid=T44 好像也没想象中的那么难,没办法,当初连个优先队列dij都不会写= = 在优先队列dij算法上加上相等的时候的处理就可以 ...

  5. Head First设计模式分析学习

    永不放弃的毅力,和对欲望的控制. 注意:要能够理解相类似的设计模式之间的区别和不同.可以把类比列举出来,加深记忆. 是否加入Spring容器中的标准是是否要用到Spring框架的方法或者功能特性,如事 ...

  6. Python 元类 - Metaclasses

    Python 元类 - Metaclasses 默认情况下儿, classes 是有 type() 构造的. 类的结构体在一个新的 namespace 被执行, 类的名字 class name 绑定( ...

  7. Linux中Hadoop的安装与配置

    一.准备 1,配通网络 ping www.baidu.com 之前安装虚拟机时配过 2,关闭防火墙 systemctl stop firewalld systemctl disable firewal ...

  8. qt creator源码全方面分析(2-10)

    目录 Creating Plugins Creating Plugins Qt Creator的核心是一个插件加载程序,加载并运行一组插件,实际上是这些插件提供了您从Qt Creator IDE中了解 ...

  9. mount.nfs: Stale file handle的解决方法

    在NFS客户端挂载rpc共享服务的时候出现这个问题 # mount -t nfs 192.168.20.6:/data /mnt mount.nfs: Stale file handle 原因是当cl ...

  10. Linux 查看CPU、内存、机器型号等硬件信息

    # 查看CPU信息 #查看CPU信息(型号) [root@localhost ~]# cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 32 ...