------------今天研究了一个最简单的屏保效果-----------

  • 效果图如下：效果很神奇，就是这个div在浏览器窗口不断的灵活移动
  •      在运动过程中，我截了一张图：

  • 代码却很简单
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {margin: 0;padding: 0;}

        #div1 {width: 200px;height: 200px;position: absolute;left: 0;background: red;}

    </style>

</head>

<body>

    <div id="div1"></div>

    <script>

        window.onload = function () {

            let Odiv = document.getElementById("div1");

            let disX = 5;

            let disY = 5;

            let x=0;

            let y=0;
            let maxWidth = window.innerWidth - Odiv.offsetWidth;        //浏览器左边界=浏览器宽度-div的宽度

            let maxHeight = window.innerHeight - Odiv.offsetHeight;     //浏览器右边界=浏览器高度-div的高度

            function auto(){

                if(x>=maxWidth)disX*=-1;

                if(y>=maxHeight)disY*=-1;

                if(x<0)disX*=-1;

                if(y<0)disY*=-1;

                x+=disX;

                y+=disY;

                Odiv.style.left=x+'px';

                Odiv.style.top=y+'px';

            }

            let timer=setInterval(auto, 40);

        }

    </script>

</body>

</html>
  • 解题思路

  • 遗留问题：div在窗口不断移动过程中，移到浏览器边缘，会出现水平滚动条或者垂直滚动条。

分析原因：仔细看代码中的数学计算，

 if(x>=maxWidth)disX*=-1; 假如右边还有3px，此时x+3=maxWidth；得到x<maxWidth;
所以还不会改变水平速度5px/40毫秒，每次移动5px，超过了3px，多出2px，就出现水平滚动条了。

当然了，移动速度为5px，运动到最右边时，出现滚动条就在一瞬间（40毫秒）很难截图。

  • 解决方法
let maxWidth = window.innerWidth - Odiv.offsetWidth-disX;        //浏览器左边界=浏览器宽度-div的宽度-水平速度矢量

let maxHeight = window.innerHeight - Odiv.offsetHeight-disY;     //浏览器右边界=浏览器高度-div的高度-垂直速度矢量

在浏览器窗口内移动的div的更多相关文章

  1. div在浏览器窗口中居中

    让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

  3. css通用小笔记03——浏览器窗口变小 div错位的问题

    我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...

  4. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  5. 让div垂直居中于浏览器窗口

    <style type="text/css">  div  {   position:absolute;   top:50%;   left:50%;   margin ...

  6. 用css实现一个空心圆，并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;   ...

  7. 理解javascript中的浏览器窗口——窗口基本操作

    × 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...

  8. 关于调整浏览器窗口JS

    有时候需要对浏览器窗口的大小进行元素的操控,当调整窗口大小时用window.onresize=function(){} 页面初始化window.onload=function(){} 要注意的是onr ...

  9. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

随机推荐

  1. python模块之configparser模块

    configparser模块:用于按一定格式创建配置文件 创建 import configparser config = configparser.ConfigParser() config['DEF ...

  2. H3C 动态路由协议的基本原理

  3. java 自动关闭资源的try语句

    Java 7简化资源清理(try-with-resources)自动关闭资源的try语句 自动关闭资源格式: try( )//此处多了圆括号,()圆括号内写打开资源的代码,在这里创建的对象必须实现Au ...

  4. H3C保存当前配置--用户图示（console）以上

    <H3C>save         //此种保存只默认保存为Startup.cfg ,系统默认是加载此文件 The current configuration will be writte ...

  5. dotnet core 输出调试信息到 DebugView 软件

    本文告诉大家如何在 dotnet core 输出调试信息到 DebugView 软件 在之前告诉小伙伴,如何在 WPF 输出调试信息到 DebugView 软件,请看文章 WPF 调试 获得追踪输出 ...

  6. rabbitmq template发送的消息中，Date类型字段比当前时间晚了8小时

    前言 前一阵开发过程遇到的问题,用的rabbitmq template发送消息,消息body里的时间是比当前时间少了8小时的,这种一看就是时区问题了. 就说说为什么出现吧. 之前的配置是这样的: @B ...

  7. dotnet 通过 WMI 获取设备厂商

    本文告诉大家如何通过 WMI 获取设备厂商 通过 Win32_ComputerSystem 可以获取电脑系统信息 通过下面代码可以获取 机器型号 和 制造厂商 var mc = "Win32 ...

  8. codeforces 1165F1/F2 二分好题

    Codeforces 1165F1/F2 二分好题 传送门:https://codeforces.com/contest/1165/problem/F2 题意: 有n种物品,你对于第i个物品,你需要买 ...

  9. 30分钟全方位了解阿里云Elasticsearch（附公开课完整视频）

    摘要: 阿里云Elasticsearch提供100%兼容开源Elasticsearch的功能,以及Security.Machine Learning.Graph.APM等商业功能,致力于数据分析.数据 ...

  10. C#获取美团评价信息

    闲来无事,朋友需要一家美团店铺的评价消息,索性做个小工具. 一:第一步找到目标网站 地址:https://www.meituan.com/meishi/4460141/ 二:分析网页请求 在目标网页, ...