最近做个小项目，给网页加个浮窗，考验了基础的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. Linux vi & bash使用笔记

    f 1.vi入门级命令 打开或新建 vi filename 有三种模式,刚开始进去的是一般模式,在一般模式下按 I 之后进入编辑模式 ,按Esc进入命令模式 在命令模式下按 :wq 保存退出 多个窗口 ...

  2. Maven debug异常:Source not found.

    异常 用Maven debug 时出现了Source not found.,在调试过程中尝试添加源码也没有效果 解决方案 先把当前正在运行中的项目停止 右键项目 -> Debug As -> ...

  3. React使用antd按需引入报错

    引言 按照antd官网配置按需引入,还是出现一系列的报错: 原因 在网上搜了一下,大部分说是react-scripts以及react-app-rewired版本不兼容的问题,我果断把下载低版本 npm ...

  4. Linq扩展方法获取单个元素

    在使用Linq 提供的扩展方法时,First(OrDefault), Single(OrDefault), Last(OrDefault)都具有返回单个元素的功能.MSDN对这些方法的描述只有功能说明 ...

  5. 我的一个配置redux（实现一次存储与调用方法）之旅

    前言 : 今天呢,就配置一下redux,redux的重要性呢,就叭叭叭一大堆,什么也没有带着配置一次来的重要,因为许多涉及到的属性和方法,用法是活的,但格式是需要记忆的. 过程中不要嫌我唠叨,有的地方 ...

  6. 1276:【例9.20】P2758 编辑距离

    题目传送门[(https://www.luogu.com.cn/problem/P2758)] 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作 ...

  7. python笔记22（面向对象课程四）

    今日内容 讲作业 栈 顺序查找 可迭代对象 约束 + 异常 反射 内容详细 1.作业 1.1 代码从上到下执行 print('你好') def func(): pass func() class Fo ...

  8. 【WPF学习】第四十六章 效果

    WPF提供了可应用于任何元素的可视化效果.效果的目标是提供一种简单的声明式方法,从而改进文本.图像.按钮以及其他控件的外观.不是编写自己的绘图代码,而是使用某个继承自Effect的类(位于System ...

  9. 20200221--python学习第14天

    今日内容 带参数的装饰器:flash框架+django缓存+写装饰器实现被装饰的函数要执行N次 模块: os sys time datetime和timezone[了解] 内容回顾与补充 1.函数 写 ...

  10. php面试笔记（5）-php基础知识-自定义函数及内部函数考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...