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

  • 效果图如下:效果很神奇,就是这个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. 如何安装Anaconda和Python

    1.下载安装文件 https://www.anaconda.com/download/ 2.百度安装方法:https://jingyan.baidu.com/article/3f16e0031e875 ...

  2. Python--day41--threading中的定时器Timer

    定时器Timer:定时开启线程 代码示例: #定时开启线程 import time from threading import Timer def func(): print('时间同步') #1-3 ...

  3. java 声明多个泛型类型和通配符

    若一个类中多个字段需要不同的泛型声明,则在声明类的时候指定多个泛型类型即可: 格式: public interface IDAO<PK, T> { PK add(T t); void re ...

  4. 浅谈LOG日志的写法

    文章来源于公司的大牛 1 Log的用途 不管是使用何种编程语言,日志输出几乎无处不再.总结起来,日志大致有以下几种用途: l  问题追踪:通过日志不仅仅包括我们程序的一些bug,也可以在安装配置时,通 ...

  5. H3C 路由的来源

  6. Cisco DNA网络POC

    角色名词解释 拓扑图 集成ISE

  7. Team Foundation Server 2015使用教程【6】:新增权限为读取器的团队

  8. Python7_内置函数总结

    Python Built-In 函数: str(obj) :输入(对象),返回一个对象的string格式: isinstance(object,classinfo):判断一个对象是否是一个已知的类型, ...

  9. python基础试题(一)

    1.执行 Python 脚本的两种方式 1.python 进入解释器 2.python 1.py 执行文件 limux里 ./1.py 2.简述位.字节的关系 8位1个字节.计算机处理以字节为单位,存 ...

  10. 【elasticsearch】数据早8小时Or晚8小时,你知道为什么吗,附解决方案

    前言 这篇文章,不会解释什么是本初子午线,只想以做实验的方式来理解数据差8小时的问题.下面就先说结论,再来谈原理. 解决方案 想必大家都很清楚:中国标准时间= UTC + 8小时. 那么所有和时区有关 ...