最近做个小项目，给网页加个浮窗，考验了基础的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. Boyer-Moore 算法 Leetcode169

    Boyer-Moore 算法 Leetcode169 一.题目 169. 多数元素 给定一个大小为 n 的数组,找到其中的多数元素.多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假 ...

  2. Django部署--uwsgi配置--nginx服务器配置

    uwsgi.ini文件 [uwsgi] #使用nginx连接时使用,Django程序所在服务器地址 socket=127.0.0.1:8000 #直接做web服务器使用,Django程序所在服务器地址 ...

  3. Django面试集锦（1-50）

    目录 1.Django ORM查询中select_related和prefetch_related的区别? 2.only与defer的用法? 3.Django ORM是什么? 4.Django创建项目 ...

  4. ubuntu系统下安装pip3及第三方库的安装

    ubuntu系统下会自带python2.x和python3.x坏境,不需要我们去安装.并且ubuntu系统下还会自动帮助我们安装python2.x坏境下的pip安装工具, 但是没有python3.x坏 ...

  5. Powershell下git中文乱码

    问题 使用git log查看提交历史, 发现中文的部分出现了乱码, 如图 解决方案 powershell中输入下面的命令 git config --global core.quotepath fals ...

  6. Go语言实现：【剑指offer】两个链表的第一个公共结点

    该题目来源于牛客网<剑指offer>专题. 输入两个链表,找出它们的第一个公共结点. Go语言实现: //长度长的先走个长度差,然后ab一起比较后面结点 //长度一样,公共结点可能在首结点 ...

  7. Linux中Hadoop的安装与配置

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

  8. Redis5.xc两种持久化方式以及主从复制配置

    关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. <Redis5.x入门教程>目录 第一章 · 准备工作 第 ...

  9. [译]课程 3: 更多关于 Jobs 和 JobsDetails

    译者注: 目录在这 [译]Quartz.NET 3.x 教程 译者注: 原文在这 Lesson 3: More About Jobs & JobDetails 正如你在 课程 2 中看到的, ...

  10. 一个基于图的数据管理系统-gStore

    gStore是遵循 BSD协议的一个开源项目.一个基于图的 RDF 三元组存储的数据管理系统.该项目是北京大学.滑铁卢大学.香港科技大学的联合研究项目.中国北京大学计算机科学与技术研究所的数据库组对该 ...