<!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+scrollTop+'px';

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

            starMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop)

        };

        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{

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

                }

            },30)

        }

        </script>

    </head>

    <body>

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

    </body>

</html>

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

JS-缓冲运动：菜单栏型悬浮框的更多相关文章

  1. JS-缓冲运动-对联型悬浮框

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

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

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

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

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

  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. 从钉钉微应用定制化导航栏看如何实现Hybrid App开发框架

    钉钉是阿里的一款企业应用APP,里面提供了混合微应用的SDK,这其实最好的一种APP架构模式.微信公众号浏览器JSSDK也提供了类似功能特性,在在交互性上没有钉钉深入. http://ddtalk.g ...

  2. 统一处理jquery ajax请求过程中的异常错误信息的机制

    当jQuery ajax向服务器发送请求,服务器发生异常,比如:400.403.404.500等异常,服务器将异常响应给客户端,此时的ajax可以获取异常信息并进行处理,但此时我们一般是跳转到与异常编 ...

  3. Apache HttpComponents 多线程处理HTTP请求

    /* * ==================================================================== * * Licensed to the Apache ...

  4. Drupal模块的安装方法

    Drupal自身的安装很简单,新建一个数据库,然后根据安装提示一步一步做就OK了. 而Drupal可以通过安装各种模块来提供更多定制功能,这些模块的安装方法基本相同,一般来说,就是以下几步: 1) 从 ...

  5. [转]Eclipse下导入外部jar包的3种方式

    我们在用Eclipse开发程序的时候,经常要用到第三方jar包.引入jar包不是一个小问题,由于jar包位置不清楚,而浪费时间.下面配图说明3种Eclipse引入jar包的方式.   1.最常用的普通 ...

  6. DataTables 表格固定栏使用方法

    有时候数据过多,为了用户体验,需要将重要的栏目固定不动,如下图所示: 从上图我们可以看出,表格滚动的时候,左边5栏是不动的.现在说一下实现方法: 插件地址: https://datatables.ne ...

  7. python中copy 与 '=' 的区别

    当你a=1000的时候a指向一个新的类,内容为1000,而b仍然指向原来指向的内容,因为你没有叫它指向其他内容.你使用=符号,使得a和b指向同一个内容,而copy则是将b的内容复制后让c指向这个拷贝的 ...

  8. 跑在Docker下的RHEL7编译Java8源码包

    1.运行Docker时需要加参数--cap-add=SYS_PTRACE,比如: docker run --cap-add=SYS_PTRACE --name buildjava8 -v /opt/r ...

  9. MFC 窗体样式修改

    窗体创建之后,如何设置窗体的样式呢? 一般情况下使用GetWindowLongW与SetWindowLongW即可实现窗体样式的修改或者使用ModifyStyle. 关于MFC存在GetWindowL ...

  10. Spring bean的初始化及销毁

    Spring bean的几个属性:scope.init-method.destroy-method.depends-on等. Scope 在Spring容器中是指其创建的Bean对象相对于其他Bean ...