<!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. Zookeeper配置文件参数与含义

    zoo.cfg   # The number of milliseconds of each tick tickTime=2000 # The number of ticks that the ini ...

  2. 在linux上安装redmine

    Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具.它用日历和甘特图辅助项目及进度可视化显示.同时它又支持多项目管理.Redmine是一个自由开放 源码软件解决方案,它提供集成的项目管理 ...

  3. DataTable使用技巧：DataRowState

    DataGridView:获取 DataRow 对象的状态,共有5个枚举值. Added 该行已添加到 DataRowCollection 中,AcceptChanges 尚未调用. Deleted ...

  4. Hbase rowkey设计一

    转自 http://blog.csdn.net/lifuxiangcaohui/article/details/40621067 hbase所谓的三维有序存储的三维是指:rowkey(行主键),col ...

  5. linux pmap命令

    pmap提供了进程的内存映射,pmap命令用于显示一个或多个进程的内存状态.其报告进程的地址空间和内存状态信息.Pmap实际上是一个Sun OS上的命令,linux仅支持其有限的功能.但是它还是对查看 ...

  6. java笔记知识点总结

    1.switch case default 语句 : switch case 语句是一个条件选择语句,找到相同的case值做为入口,执行后面的程序:若所有的case都不满足,则找default入口:若 ...

  7. 关于Cocos2d-x中实例伸缩后的位置设置

    在有的时候觉得图片太大,会进行缩放,但是在设置位置的时候,用fire->getContentSize(),用的是它原来的大小,就会产生不能准确设置节点的现象 1.在设置伸缩比例的时候,记住比例值 ...

  8. 关于SQL语句的一些注意事项

    1.Into 表后要编辑-IntelliSense-刷新本地缓存 才能访问新表 2.Is null不是=null

  9. e1087. 用For循环做数组的遍历

    The for statement can be used to conveninently iterate over the elements of an array. The general sy ...

  10. Javascript 严格模式 strict mode（转）

    一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...