边栏层滚动运动缓存

边栏层滚动运动缓存

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>側边滚动运动</title>
        <style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				position: absolute;
				background: green;
				right: 0px;
			}
			body {
				height: 1000px;
			}

        </style>
    </head>

    <script  type="text/javascript">
        window.onload = function() {

            document.onscroll = function() {
                var oDiv1 = document.getElementById("div1");
                var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var iClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var i = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2;
                //oDiv1.style.top = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
                // oDiv1.innerHTML = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
                startMove(oDiv1, parseInt(i));//paserInt是防止抖动,目标点取整
            };

            var oTimer = null;
            function startMove(obj, iTarget) {
                clearInterval(oTimer);

                oTimer = setInterval(function() {
                      //速度
                    var iSpeed = (iTarget - obj.offsetTop) /8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    //速度取整
                    if (obj.offsetTop == iTarget) {
                        clearInterval(oTimer);
                    } else {
                        obj.style.top = obj.offsetTop + iSpeed + "px";//层运动
                    };
                }, 30);
            };
        };
    </script>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

版权声明:本文博主原创文章。博客,未经同意不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116918.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • windows下查看dns缓存和刷新缓存

    windows下查看dns缓存和刷新缓存

  • centos7下安装mysql5.7(rpm)「建议收藏」

    centos7下安装mysql5.7(rpm)「建议收藏」一查看linux操作系统版本和系统内核版本[root@nfs_client~]#cat/etc/redhat-release查看操作系统版本CentOSLinuxrelease7.5.1804(Core)[root@nfs_client~]#uname-r查看系统内核版本3.10.0-862.el7.x86_64…

  • java OverlappingFileLockException文件锁

    java OverlappingFileLockException文件锁RandomAccessFilefile=newRandomAccessFile(“test.txt”,”rw”);FileChannelfileChannel=file.getChannel();FileLocklock=fileChannel.lock();上面的java文件锁是进程级别的,也就是说,如果一个进程的一个线程获取锁后,在没有释放该锁之前又有另外一个线程要获取同一个文件的锁,这时这个线程并不会等待,而是会抛出OverlappingFileLockExceptio

  • java堆和栈的区别和联系_数据结构堆和栈的区别

    java堆和栈的区别和联系_数据结构堆和栈的区别1、概述在Java中,内存分为两种,一种是栈内存,另一种就是堆内存。2、堆内存1.什么是堆内存?堆内存是是Java内存中的一种,它的作用是用于存储Java中的对象和数组,当我们new一个对象或者创建一个数组的时候,就会在堆内存中开辟一段空间给它,用于存放。2.堆内存的特点是什么?第一点:堆其实可以类似的看做是管道,或者说是平时去排队买票的的情况差不多,所以堆内存的特点就是:先进先出,后进后出,也

  • ringbuffer 无锁队列_javabytebuffer使用

    ringbuffer 无锁队列_javabytebuffer使用一、简介1、循环缓冲区的实现原理环形缓冲区通常有一个读指针和一个写指针。读指针指向环形缓冲区中可读的数据,写指针指向环形缓冲区中可写的缓冲区。通过移动读指针和写指针就可以实现缓冲区的数据读取和写入。在通常情况下,环形缓冲区的读用户仅仅会影响读指针,而写用户仅仅会影响写指针。如果仅仅有一个读用户和一个写用户,那么不需要添加互斥保护机制就可以保证数据的正确性。如果有多个读写用户访问环形缓冲区,那么必须…

  • Word在试图打开文件时遇到错误请尝试下列方法 *检查文档或驱动器的文件权限*确保有足够的内存和磁盘空间,…[通俗易懂]

    Word在试图打开文件时遇到错误请尝试下列方法 *检查文档或驱动器的文件权限*确保有足够的内存和磁盘空间,…[通俗易懂]可能存在两种可能:下载保存过程中,该文件损坏,导致无法打开;文件安全性问题,可以打开Word2013或Excel2013,依次点击“文件→选项→信任中心→信任中心设置→受保护的视图”,取消受保护的视图标签下的三个复选框的勾选,或者通过简单的操作解除某个文件的锁定。右键点击您的Word文档并点击属性,在文件的属性窗口中,点击“解除锁定。 转载于:https://b…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号