1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>缓冲运动2</title>
  7.         <style type="text/css">
  8.         body{
  9.             height: 2000px;
  10.         }
  11.             .div {
  12.                 width: 100px;
  13.                 height: 100px;
  14.                 background-color: darkslateblue;
  15.                 position: absolute;
  16.                 right: 0;
  17.                 /*bottom: 0;*/
  18.                 cursor: pointer;
  19.             }
  20.         </style>
  21.         <script type="text/javascript">
  22.         window.onscroll= function(){
  23.             //1,给浏览器的滚动添加事件，onscollTop事件
  24.             var oDiv = document.getElementById('div');
  25.             var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
  26. //            oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
  27.             //可视区域的高度减掉物体高度再加上向上滚动的高度
  28.             starMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
  29.             //除以2以后就一直抖,就用parseInt取整
  30.         };
  31.         var timer = null;
  32.         function starMove(iTarget){
  33.             var oDiv = document.getElementById('div');
  34.             clearInterval(timer);
  35.             timer = setInterval(function(){
  36.                 var speed = (iTarget-oDiv.offsetTop)/4;
  37.                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
  38.                 if(oDiv.offsetTop==iTarget){
  39.                     clearInterval(timer)
  40.                 }else{
  41.                     document.title = iTarget;
  42.                     document.getElementById('btn').value=oDiv.offsetTop;
  43.                     oDiv.style.top = oDiv.offsetTop+speed+'px';
  44.                 }
  45.             },30)
  46.         }
  47.  
  48.         </script>
  49.     </head>
  50.  
  51.     <body>
  52.         <div class="div" id="div"></div>
  53.     <input type="text" value="" id="btn" style="top: 0;
  54.         right: 0;
  55.         position: fixed;"/>
  56.     </body>
  57.  
  58. </html>

课程链接：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

JS-缓冲运动-对联型悬浮框的更多相关文章

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

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

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

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  3. JS-缓冲运动：菜单栏型悬浮框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js缓冲运动

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

  5. JS缓冲运动案例

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

  6. [Js]缓冲运动

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

  7. （40）JS运动之右下角悬浮框

    <!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> ...

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

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

  9. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

随机推荐

  1. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  2. sysctl -P 报错解决办法

    sysctl -P 报错解决办法问题症状修改 linux 内核文件 #vi /etc/sysctl.conf后执行sysctl  -P 报错error: "net.bridge.bridge ...

  3. iOS边练边学--简单的数据操作(增、删、改)，左滑动删除和弹窗

    一.数据刷新的原则: 通过修改模型数据,来修改tableView的展示 先修改数据模型 在调用数据刷新方法 不要直接修改cell上面子控件的属性 二.增删改用到的方法: <1>重新绑定屏幕 ...

  4. Hbase建模

    转自:http://blog.itpub.net/28912557/viewspace-1119865/ 什么情况下使用Hbase?1,成熟的数据分析主题,查询模式已经确定并且不易轻易改变.(主要还是 ...

  5. 网络协议之bt---bt协议详解 DHT篇（下)

    -------------------------author:pkf -------------------------------qq:1327706646 ------------------- ...

  6. linux -- ubuntu修改IP地址、网关、dns

    ubuntu系统 一.使用命令设置Ubuntu IP地址 1.修改配置文件blacklist.conf禁用IPV6 sudo vi /etc/modprobe.d/blacklist.conf 表示用 ...

  7. 转载： Erlang Socket解析二进制数据包

    转自:http://www.itkee.com/developer/detail-318.html 今天在家里闲来无事,实践了一下Erlang的Socket的功能.记录一下在过程中遇到的一些问题,以及 ...

  8. perl 字符串比较操作符

    perl 中数字和字符串的比较操作符是不一样的 : 其中 == 用于比较数字是否相等:eq 用于比较字符串是否相等: 今天找程序里的bug,结果就是这个操作符用错,哎,赶紧记一下!

  9. vnc远程控制软件怎么用

    CC是一款不错的局域网控制软件,它的轻便让人无法相信,下载过该软件的人都知道,该软件只有大小 工具/原料   我这里使用的是vnc-E4_2_9X32中文版 被控制端的安装   1 我们先来被控制电脑 ...

  10. 【Java面试题】42 TreeSet里面放对象，如果同时放入了父类和子类的实例对象，那比较时使用的是父类的compareTo方法，还是使用的子类的compareTo方法，还是抛异常！

    应该是没有针对问题的确切的答案,当前的add方法放入的是哪个对象,就调用哪个对象的compareTo方法,至于这个compareTo方法怎么做,就看当前这个对象的类中是如何编写这个方法的 试验如下: ...