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 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS(CGGeometry)几何类方法总结 原

CGPoint CGPointMake(CGFloat x, CGFloat y);

1072
来自专栏coding...

Objective-C 自定义UISlider滑杆 分段样式效果需求分析代码部分DEMO地址

查看UISlider控件发现这个类是继承自UIControl,那么就自定义一个UIControl来实现UISlider没有的效果。 公开的变量中都是一些通用的...

1883
来自专栏谈补锅

Quartz2D复习(四) --- 图层CALayer和动画CAAnimation

1)、在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView

963
来自专栏hrscy

iOS瀑布流

1274
来自专栏知无涯

js判断手机浏览器操作系统及微信浏览器的方法

48910
来自专栏我和未来有约会

为UINavigationBar添加自定义背景

@implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRe...

1969
来自专栏前端知识分享

第44天:鼠标移动放大效果

1104
来自专栏狂码一生

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.bod...

49410
来自专栏vue学习

偏移量、客户区大小、视口大小、滚动大小、确定元素大小

1、偏移量 先讲几个偏移量属性: offsetHeight:元素在垂直方向上占用的空间大小;相当于border-top+padding-top+height...

1372
来自专栏Alice

demo1 动态显示view或弹框 动态隐藏view或弹框

有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框也可以关闭按钮。   在实现功能的基础上,以...

2167

扫码关注云+社区

领取腾讯云代金券