<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>缓冲运动2</title>

        <style type="text/css">

        body{

            height: 2000px;

        }

            .div {

                width: 100px;

                height: 100px;

                background-color: darkslateblue;

                position: absolute;

                right: 0;

                /*bottom: 0;*/

                cursor: pointer;

            }

        </style>

        <script type="text/javascript">

        window.onscroll= function(){

            //1,给浏览器的滚动添加事件，onscollTop事件

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

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

//            oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';

            //可视区域的高度减掉物体高度再加上向上滚动的高度

            starMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));

            //除以2以后就一直抖,就用parseInt取整

        };

        var timer = null;

        function starMove(iTarget){

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

            clearInterval(timer);

            timer = setInterval(function(){

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

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

                if(oDiv.offsetTop==iTarget){

                    clearInterval(timer)

                }else{

                    document.title = iTarget;

                    document.getElementById('btn').value=oDiv.offsetTop;

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

                }

            },30)

        }

        </script>

    </head>

    <body>

        <div class="div" id="div"></div>

    <input type="text" value="" id="btn" style="top: 0;

        right: 0;

        position: fixed;"/>

    </body>

</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. http抓包工具

    fiddler 可以用该工具抓包并修改对应的参数数据

  2. R语言中的数据处理包dplyr、tidyr笔记

    R语言中的数据处理包dplyr.tidyr笔记   dplyr包是Hadley Wickham的新作,主要用于数据清洗和整理,该包专注dataframe数据格式,从而大幅提高了数据处理速度,并且提供了 ...

  3. Framework 7 之 Smart select 选择后自动隐藏

    Framework 7官网地址:Framework 7(英文版) Framework 7(中文版) 给“smart-select”添加属性  data-back-on-select="tru ...

  4. 在Linux环境下mysql的root密码忘记解决方法

    MySQL密码的恢复方法之一 ．首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下 ...

  5. l2正则化

    在机器学习中,无论是分类还是回归,都可能存在由于特征过多而导致的过拟合问题.当然解决的办法有 (1)减少特征,留取最重要的特征. (2)惩罚不重要的特征的权重. 但是通常情况下,我们不知道应该惩罚哪些 ...

  6. 关于Cocos2d-x中让主角运动的方法

    比如要让角色跳起来 1.如果是用到物理引擎,那么在物理世界中,可以用 hero->getPhysicsBody()->setVelocity(Vec2(0, 400));  //给主角一个 ...

  7. e669. 绘制缓冲图像

    To draw on a buffered image, create a graphics context on the buffered image. // Create a graphics c ...

  8. bootstrap -- meta中的viewport指令

    在查看bootstrap教程中,碰到 <meta name="viewport" content="width=device-width, initial-scal ...

  9. unity之Mathf类

    说明:Mathf类主要提供数学计算的函数与常量,包含了所有数学计算时需要用到的函数.所以掌握Mathf类里面的成员变量和成员函数是必要的. 使用Mathf:通常的如果使用一个类中的成员变量或者成员函数 ...

  10. 【Java面试题】59 Math.round(11.5)等於多少? Math.round(-11.5)等於多少?

    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应,例如,ceil的英文意义是天花板,该方法就表示向上取整,Math.ceil(11. ...