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. 6.Android-五大布局

    Android 五大布局如下所示: LinearLayout 线性布局 只能指定一个方向(垂直/水平)来布局 RelativeLayout 相对布局 通过某个控件为参照物,来定位其它控件的位置的布局方 ...

  2. 多测师讲解rf--定位元素--高级讲师肖sir

    注意点: 注意点: rfbug:rf 点击勾选一个运行就运行两个出现用例执行 注释快捷键: 改字体大小: 快捷键:显示关键字信息 (ctrl+鼠标悬浮) 注解不能空格在注解 未保存提示 定位方法 : ...

  3. golang常用库：字段参数验证库-validator

    背景 在平常开发中,特别是在web应用开发中,为了验证输入字段的合法性,都会做一些验证操作.比如对用户提交的表单字段进行验证,或者对请求的API接口字段进行验证,验证字段的合法性,保证输入字段值的安全 ...

  4. kali linux 换国内源

    输入命令 vim /etc/apt/sources.list 添加国内源 #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-f ...

  5. linux mount挂载命令

    [root@localhost src]# mount 查询系统中已经挂载的设备 [root@localhost src]# mount -a 依据配置文件 /etc/fstab的内容,自动挂载

  6. property和setter装饰器

    # property装饰器 # 作用: 将一个get方法转换为对象的属性. 就是 调用方法改为调用对象 # 使用条件: 必须和属性名一样 # setter方法的装饰器: # 作用:将一个set方法转换 ...

  7. Flink + 强化学习 搭建实时推荐系统

    如今的推荐系统,对于实时性的要求越来越高,实时推荐的流程大致可以概括为这样: 推荐系统对于用户的请求产生推荐,用户对推荐结果作出反馈 (购买/点击/离开等等),推荐系统再根据用户反馈作出新的推荐.这个 ...

  8. CPU 运算实现过程

    总结 加法运算过程:十进制:1+1=2二进制01+01=10实现过程: 在做加法时CPU内部会调用加法器,实际上加法运算器所做的工作就是按位与操作和进位运算!所谓的进位运算规则和十进制一样满10进一而 ...

  9. 圆形进度条的模仿1-DrawArc,DrawCircle,DrawText讲解

    1:画弧 canvas.drawArc(oval,startAngle,sweepAngle,useCenter,paint) 第一个参数:绘制的区域,oval可以是被定好了的一个区域,也可以将ova ...

  10. Linux文件系统和管理-2文件操作命令（上）

    文件操作命令 文件 文件也包括目录 目录是一种特殊的文件 目录 一个目录名分成两部分 所在目录 dirname 父目录的路径 文件名 basename 本身就是两个命令 [root@C8-1 misc ...