专栏首页前端说吧JS-缓冲运动-对联型悬浮框

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

<!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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS-缓冲运动:菜单栏型悬浮框

    xing.org1^
  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • 两列布局——但只用右浮动

    xing.org1^
  • JS-缓冲运动:菜单栏型悬浮框

    xing.org1^
  • Python| 设置守护进程

    上一篇文章 介绍 join 在多进程中的作用,本文继续学习设置守护进程的对程序的影响。(Python大牛可以绕行)

    用户1278550
  • div拖拽实现延伸

    从入门到进错门
  • JavaScript之DOM

    一、什么是DOM? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 DOM(Docum...

    人生不如戏
  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

    用户1197315
  • jquery操作DOM 元素(2)

    .after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,conten...

    用户1197315
  • firstElementChild、firstChild 、childNodes和children方法

    小胖

扫码关注云+社区

领取腾讯云代金券