zoukankan      html  css  js  c++  java
  • 运动——对联悬浮框

    代码:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #div {
    100px;
    height: 150px;
    background: red;
    position: absolute;
    right: 0;
    bottom: 0;
    }
    </style>
    <script>
    // window.onscroll 滚动页面时触发
    window.onscroll=function() {
    var oDiv = document.getElementById("div");
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //一般只用前者
    startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop));
    //clientHeight:内容可视区域的高度,其中变量主要表示高度在页面浏览器所能看到的区域中央
    };
    var timer=null;//timer一定要放在函数外,clearInterval(timer)才能起作用

    function startMove(iTarget){
    var oDiv = document.getElementById("div");

    clearInterval(timer);//保证函数中永远只有一个定时器,防止效果叠加,比如运动不断加速或透明度不断加大
    timer=setInterval(function(){
    var speed=(iTarget-oDiv.offsetTop)/4;//4 只是用来设置速度快慢,可以自定义(越大速度越慢)
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    //Math.ceil():向上取整;Math.floor()向下取整;取整speed是为了防止speed和iTarget有误差而导致窗口在悬浮位置抖动
    if(oDiv.offsetTop==iTarget){
    clearInterval(timer);
    }else{
    document.title=iTarget;//获取当前目标的值
    document.getElementById("txt").value=oDiv.offsetTop;
    oDiv.style.top=oDiv.offsetTop+speed+'px';

    }
    },30);



    }
    </script>
    </head>

    <body style="height:2000px;">
    <input type="text" id="txt" style="position:fixed; right:0; top:0;"/>

    <div id="div"></div>
    </body>
    </
    html>
    运行结果:
      初始界面:
          
     
      不断滑动页面滚动条之后界面:
              




  • 相关阅读:
    VS2010 C++环境下DLL和LIB文件目录及名称修改
    从点击Button到弹出一个MessageBox, 背后发生了什么
    Unicode化
    ANSI和UNICODE编程的注意事项
    SQL的主键和外键约束
    关于_WIN32_WINNT的含义
    清理Visual Studio中VC++工程里不需要的文件
    Windows应用程序的VC链接器设置
    #define WIN32_LEAN_AND_MEAN 的作用
    c++中char*wchar_t*stringwstring之间的相互转换
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5265148.html
Copyright © 2011-2022 走看看