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

  • 效果图如下：效果很神奇，就是这个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. HDU 1114 完全背包问题

    题意:有一个存钱罐,空罐时的重量是e,满罐时的重量是f,现在有n种硬币,每一种有无限个,现在给出每一种硬币的价值p和重量w,问存钱罐中最少钱,输出最小钱,否则输出... 思路:变形的完全背包问题,只是 ...

  2. pytorch中如何处理RNN输入变长序列padding

    一.为什么RNN需要处理变长输入 假设我们有情感分析的例子,对每句话进行一个感情级别的分类,主体流程大概是下图所示: 思路比较简单,但是当我们进行batch个训练数据一起计算的时候,我们会遇到多个训练 ...

  3. H3C PPP会话建立过程

  4. 使用Fiddler抓取微信饿了么小程序数据

    使用Fiddler抓取微信饿了么小程序数据 准备 一部装载Android 7.0以下的手机:此处使用华为荣耀5x 微信小程序7.0以下版本:此处为6.6.7.此处可通过豌豆荚应用下载. 安装好的Fid ...

  5. mac默认截图、截图代码

    苹果系统自带截图功能   1 截取全屏:快捷键(Shift+Command+3) 直接按“Shift+Command+3“快捷键组合,即可截取电脑全屏,图片自动保存在桌面. 2 截图窗口:快捷键(Sh ...

  6. 【mac】关于mac的一些命令

    一. 如何查看自己的文件大小,所有文件占了多少? du -h -d 1 .        当前目录文件以及大小 sudo  du -h -d 1 /    所目录下的文件以及大小

  7. 改善Azure App Service托管应用程序性能的几个技巧

    本文介绍了几个技巧,这些技巧可以改善Azure App Service托管应用程序的性能.其中一些技巧是你现在就可以进行的配置变更, 而其他技巧则可能需要对应用程序进行一些重新设计和重构. 开发者都希 ...

  8. Codeforces Round #524 (Div. 2) codeforces 1080A~1080F

    目录 codeforces1080A codeforces 1080B codeforces 1080C codeforces 1080D codeforces 1080E codeforces 10 ...

  9. Android2_分析项目的结构

    一.项目结构 成功运行第一个AS项目HelloWorld之后,我们开始试着分析一下这个项目.毕竟知其然也要知其所以然. 这是一个安卓的项目结构(实际上这是安卓模式的项目结构) 我们可以切换成Proje ...

  10. c++ list的坑

    std::list为空时调用pop_front的访问越界问题 std::list为空时调用pop_back访问越界问题 所以在使用pop_front . pop_back要先判断list是否为空 st ...