最近做个小项目，给网页加个浮窗，考验了基础的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. python sqlalchemy mysql 自动映射

    SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作 简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取执行结果 ...

  2. js中函数this的指向

    this 在面试中,js指向也常常被问到,在开发过程中也是一个需要注意的问题,严格模式下的this指向undefined,这里就不讨论. 普通函数 记住一句话哪个对象调用函数,该函数的this就指向该 ...

  3. webpack入门系列2

    前面介绍了使用webpack做最基础的打包,接下来讲讲webpack的进阶. 1.使用 webpack 构建本地服务器: 想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webp ...

  4. win10 + cuda10 +cudnn + GLUON 环境搭建

    1. <动手学深度学习> 由于新型非典型肺炎扩散,上班日期挪到2.10 日了,在家比较无聊决定了解一下深度学习. 在github 上找到一个资源,可以动手学深度学习,便打算按照这本书的内容 ...

  5. tornado自定义分页扩展

    一.分页扩展类 #! /usr/bin/env python # -*- coding:utf-8 -*- # __author__ = "TKQ" class Paginatio ...

  6. GBM，XGBoost，LightGBM

    GBM如何调参:https://www.analyticsvidhya.com/blog/2016/02/complete-guide-parameter-tuning-gradient-boosti ...

  7. ARTS Week 13

    Jan 20, 2020 ~ Jan 26, 2020 Algorithm Problem 141 Linked List Cycle (环形链表) 题目链接 题目描述:给定一个链表,判断链表中是否存 ...

  8. DG参数 LOG_ARCHIVE_DEST_n

    DG参数 LOG_ARCHIVE_DEST_n This chapter provides reference information for the attributes of the LOG_AR ...

  9. 实例演示：如何在Kubernetes上大规模运行CI/CD

    本周四晚上8:30,第二期k3s在线培训如约开播!本期课程将介绍k3s的核心架构,如高可用架构以及containerd.一起来进阶探索k3s吧! 报名及观看链接:http://z-mz.cn/PmwZ ...

  10. Csp_J2019游记

    Day_-14 学校开始停课集训,还好还有上午~~ Day_-7 马上半期考试+\(Csp\),心态已炸,却还要坚持集训 Day_-1 \(Csp\)前夕,打算临时抱抱佛脚,死磕了一下图论(诸如最小生 ...