<!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. [uart]2.tty和uart的函数调用流程

    以下是在include/uapi/linux/tty.h中定义了现有的线规号,如果需要定义新的,则需要在后面添加新的 /* line disciplines */ #define N_TTY 0 #d ...

  2. HDU 5289 Assignment（多校2015 RMQ 单调（双端）队列）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5289 Problem Description Tom owns a company and he is ...

  3. 服务器不装Excel读取Excel并转换DataTable

    原来是用OleDb.4.0组件读取Excel,但是放到服务器后 傻了,服务器没装Excel ,而且领导说不可以装 没办法,只好自己重新找下代码 在CodeProject找到一个开源的dll,一阵欢喜啊 ...

  4. Hibernate- QBC离线查询

    package com.gordon.test; import java.util.List; import org.hibernate.Criteria; import org.hibernate. ...

  5. ggplot2学习

    R语言里面一个比较重要的绘图包——ggplot2,是由Hadley Wickham于2005年创建,于2012年四月进行了重大更新,作者目前的工作是重写代码,简化语法,方便用户开发和使用.ggplot ...

  6. C语言 字面量

    在计算机科学中,字面量(literal)是用于表达源代码中一个固定值的表示法(notation). 几乎所有计算机编程语言都具有对基本值的字面量表示,诸如:整数.浮点数以及字符串: 而有很多也对布尔类 ...

  7. Qt信号槽的一些事

    注:此文是站在Qt5的角度说的,对于Qt4部分是不适用的. 1.先说Qt信号槽的几种连接方式和执行方式. 1)Qt信号槽给出了五种连接方式: Qt::AutoConnection 0 自动连接:默认的 ...

  8. selenium测试（Java）--截图（十九）

    package com.test.screenshot; import java.io.File; import java.io.IOException; import org.apache.comm ...

  9. chrome浏览器插件推荐——Vimium 篇

    Vimium 是chrome底下的一个插件,所有chrome浏览器或者是基于chrome内核的浏览器(比如我用的Vivaldi)都可以使用这个插件.它提供了大量快捷键来方便键盘党浏览网页.目前在Chr ...

  10. 基于jQuery的计算文本框字数的代码-jquery

    用户边输入计算同时进行,告诉用户还剩余多少可输入的字数,当超过规定的字数后,点击确定,会让输入框闪动 一.功能:  1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数;  2.当超过规定的字数 ...