<!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. Apache HttpComponents 如何在正常结束前中止一个HTTP请求

    package org.apache.http.examples.client; import org.apache.http.HttpEntity; import org.apache.http.H ...

  2. UVA 11468 AC自动机入门题 记忆化概率dp+ac自动机

    /** 链接:https://vjudge.net/problem/UVA-11468 详见lrj训练指南P218 我的是反向求存在模板串的概率. dp[i][j]表示当前i位置选择字符,前面i-1个 ...

  3. 定制LNMP的RPM包

    自动化部署必备技能—定制化RPM包 回顾下安装软件的三种方式: 1.编译安装软件,优点是可以定制化安装目录.按需开启功能等,缺点是需要查找并实验出适合的编译参数,诸如MySQL之类的软件编译耗时过长. ...

  4. /etc/fstab文件损坏怎么办

    第一步首先关机挂载磁盘 第二步开机启动从BIOS,关键字F2 第三步光盘启动进入救援模式 第四步vi /mnt/sysimagimage/etc/fstab ,编辑完exit退出,reboot 进入光 ...

  5. 初学 Spring boot 报错 Whitelabel Error Page 404

    按照教程,写了个最简单的 HelloWorld,尼玛报错 -->Whitelabel Error Page 404. 网上99%都是项目结构不对,说什么 Application放在父级 pack ...

  6. 高性能高并发网络库：StateThreads

    StateThreads是一个C的网络程序开发库,提供了编写高性能.高并发.高可读性的网络程序的开发库,轻量级网络应用框架 共也就3000行C代码 网络程序(Internet Application) ...

  7. 【转】优秀PMP项目经理必备的8个要素

    结合本人这几年在项目管理上的总结和得失,本人认为优秀的项目经理要有 责任心.要 善于沟通.能 引导客户.能 预测风险. 善于总结. 随需应变.善于 激励团队.同时也要 懂技术. 责任心 作为项目经理首 ...

  8. CentOS定位、查找文件的命令

    定位.查找文件的命令 命令 功能 命令 功能 which 从path中找出文件的位置 find 找出所有符合要求的文件 whereis 找出特定程序的路径 locate 从索引中找出文件位置 9.1 ...

  9. js中以键值对的形式当枚举

    js中以键值对的形式当枚举var Penum= { B: "姓名", C: "所属居委", D: "证件号", E: "性别&qu ...

  10. 【Java面试题】9 abstract class和interface有什么区别?

    含有abstract修饰符的class即为抽象类,abstract 类不能创建的实例对象.含有abstract方法的类必须定义为abstract class,abstract class类中的方法不必 ...