JS缓冲运动案例：右下角悬浮窗

红色区块模拟页面的右下角浮窗，在页面进行滚动时，浮窗做缓冲运动，最终在页面右下角停留。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JS小案例：右侧缓冲悬浮框</title>

  <style>

    body {

      height: 2000px;

      margin: 0px;

    }

    #div1 {

      width: 100px;

      height: 150px;

      background: red;

      position: absolute;

      right: 0;

      bottom: 0;

    }

  </style>

  <script>

// 补充代码

  </script>

</head>

<body>

  <div id='div1'></div>

</body>

</html>

　　

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JS小案例：右侧缓冲悬浮框</title>

  <style>

    body {

      height: 2000px;

      margin: 0px;

    }

    #div1 {

      width: 100px;

      height: 150px;

      background: red;

      position: absolute;

      right: 0;

      bottom: 0;

    }

  </style>

  <script>

    window.onscroll = function () {

      var oDiv = document.getElementById('div1');

      startMove();

    }

    var timer = null;

    function startMove() {

      var oDiv = document.getElementById('div1');

      clearInterval(timer);

      timer = setInterval(function () {

        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

        var iTarget = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop;

        var speed = (iTarget - oDiv.offsetTop) / 4;

        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (oDiv.offsetTop == iTarget) {

          clearInterval(timer);

        } else {

          oDiv.style.top =oDiv.offsetTop +speed+ 'px';

        }

      }, 30)

    }

  </script>

</head>

<body>

  <div id='div1'></div>

</body>

</html>

　　

JS缓冲运动案例：右下角悬浮窗的更多相关文章

  1. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  2. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  3. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

  4. [Js]缓冲运动

    一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...

  5. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. JavaScript设置右下角悬浮窗

    很多时候,我们需要设置一个dom节点到浏览器窗口的右下角.我们需要那个元素可以在窗口Scroll滚动或者变换大小resize的时候都可以保持浮动在那个位置.这个时候,我在网上看了看,发现很多框架什么啊 ...

  7. JS网站右下角悬浮视窗可关闭广告

    效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...

  8. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  9. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

随机推荐

  1. Elasticsearch（4）：映射

      ES中的映射(mapping)是用于定义索引中文档以及文档中的字段如何被存储和索引(动词)的一种机制,例如,通过映射我们可以进行如下的这些定义: 索引文档中,哪些字符型字段应该被当做全文本类型: ...

  2. 洛谷 P4819 [中山市选]杀人游戏（tarjan缩点）

    P4819 [中山市选]杀人游戏 思路分析 题意最开始理解错了(我太菜了) 把题意简化一下,就是找到可以确定杀手身份的最小的危险查看数 (就是不知道该村名的身份,查看他的身份具有危险的查看数量),用 ...

  3. cmake引入三方库

    目录结构 . |-- cmake | |-- CompilerSettings.cmake | |-- Options.cmake | `-- ProjectJsonCpp.cmake |-- CMa ...

  4. 【树形DP】CF 1293E Xenon's Attack on the Gangs

    题目大意 vjudge链接 给n个结点,n-1条无向边.即一棵树. 我们需要给这n-1条边赋上0~ n-2不重复的值. mex(u,v)表示从结点u到结点v经过的边权值中没有出现的最小非负整数. 计算 ...

  5. （在模仿中精进数据可视化03）OD数据的特殊可视化方式

    本文完整代码已上传至我的Github仓库https://github.com/CNFeffery/FefferyViz 1 简介 OD数据是交通.城市规划以及GIS等领域常见的一类数据,特点是每一条数 ...

  6. spring boot:用dynamic-datasource-spring-boot-starter配置多数据源访问seata(seata 1.3.0 / spring boot 2.3.3)

    一,dynamic-datasource-spring-boot-starter的优势? 1,dynamic-datasource-spring-boot-starter 是一个基于springboo ...

  7. ansible使用script模块在受控机上执行脚本（ansible2.9.5）

    一,ansible的script模块的用途 script 模块用来在远程主机上执行 ansible 管理主机上的脚本, 即:脚本一直存在于 ansible 管理主机本地, 不需要手动拷贝到远程主机后再 ...

  8. Linux关机时执行指定脚本

    要实现在Linux关机时执行某个脚本的具体思路 1.在文件夹 /etc/init.d/ 下创建关机时需要执行的脚本 file_name; 2.分别在文件夹 /etc/rc0.d/ 和 /etc/rc6 ...

  9. Mosquitto服务器的日志分析

    启动Mosquitto后,我们可以看到Mosquitto的启动日志: 1515307521: mosquitto version 1.4.12 (build date 2017-06-01 13:03 ...

  10. 字节跳动2020Java面经,你离高薪就只差一片面试题了

    前言 经历了惨痛的春招与秋招之后,也积攒了一些面经,希望能对大家有所帮助.由于字数限制需要答案的可以关注GZH[程序员空间] 免费领取完整版PDF 其他 什什么是幂等?什什么情况下需要考虑幂等?你怎么 ...