最近做个小项目，给网页加个浮窗，考验了基础的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. Kubernetes-Service资源详解

    service的三种工作模式:(userstats(效率低).iptables.ipvs) service可以自动实现负载均衡.service自动实现了负载均衡,service通过selector标签 ...

  2. 【存储类、链接、存储管理】分配内存：malloc()、free()

    一.使用库函数:malloc()分配管理内存 (一)标识符(Identifier) 1. 定义变量时,使用了诸如 a.abc.mn123 这样的名字,它们都是程序员自己起的,一般能够表达出变量的作用, ...

  3. CCNA的基础知识及要点

    一.CCNA中的基础知识及要点: 2.网线的制作:568B:橙白,橙,绿白,蓝,蓝白,绿,棕白,棕 568A的排线顺序从左到右依次为:白绿.绿.白橙.蓝.白蓝.橙.白棕.棕.实验目的:初学者常为做网线 ...

  4. C++ ABI之名字改编(以Qt为例)

    在C++中,由于重载等技术的存在,编译器要将函数.结构体.类等等的信息传递给链接器,就不能像C语言那样简单地通过函数名来完成,它需要提供额外的参数信息,而还要和C语言共用链接器,这就需要用到名字改编( ...

  5. LaTeX技巧472：定义一个LaTeX参考文献不带编号且有缩进的方法

    LaTeX_Fun的博客 LaTeX技巧381:参考文献项第二行缩进如何定义? \makeatletter\renewenvironment{thebibliography}[1]{\section* ...

  6. Intel发布神经网络压缩库Distiller：快速利用前沿算法压缩PyTorch模型——AttributeError: module ‘tensorboard' has no attribute 'lazy'

    转载自:CSDN Nine-days   近日,Intel 开源了一个用于神经网络压缩的开源 Python 软件包 Distiller,它可以减少深度神经网络的内存占用.加快推断速度及节省能耗.Dis ...

  7. BZOJ 1025 [SCOI2009]游戏 (DP+分解质因子)

    题意: 若$a_1+a_2+\cdots+a_h=n$(任意h<=n),求$lcm(a_i)$的种类数 思路: 设$lcm(a_i)=x$, 由唯一分解定理,$x=p_1^{m_1}+p_2^{ ...

  8. sqlserver install on linux chapter one

    Hello The MS open the source to let people download source. You may ask where to download ? Ask goog ...

  9. HTML兼容问题及解决办法

    标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的: <style> .box{ width:400px;} .left{ width:200px;height:300px;back ...

  10. 关于JAVA中源码级注解的编写及使用

    一.注解简介: 1.1.什么是"注解": ​ 在我们编写代码时,一定看到过这样的代码: class Student { private String name; @Override ...