• js基础之BOM


    一、window.open

    栗子:阿里西西运行代码功能

    var oBtn = document.getElementById('btn1');
    var oTxt = document.getElementById('txt1');
    oBtn.onclick=function(){
      var oNewWin = window.open('about blank','_blank');
      oNewWin.document.write(oTxt.value);
    }

    二、scrollTop、offsetHeight

    window.onload=window.onresize=window.onscroll=function(){
      var oDiv = document.getElementById('div1');
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      var t = (document.documentElement.clientHeight-oDiv['offsetHeight'])/2;
       oDiv.style.top=scrollTop+t+'px';console.log(scrollTop+'-'+getComputedStyle(oDiv)['height']);
    }

    三、回到顶部

    var oBtn = document.getElementById('btn1');
    var bSys = true;
    var timer = null;
    //如何检测用户拖动滚动条
    window.onscroll=function(){
      if(!bSys){
        clearInterval(timer);
      }
        bSys = false;
      }
      oBtn.onclick=function(){
        timer = setInterval(function(){
          var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
          var iSpeed = Math.floor(-scrollTop/8);

          if(scrollTop==0){
            clearInterval(timer);
          }
          bSys = true;
          document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
        },30);
    }


    作者:狂流
    出处:http://www.cnblogs.com/kuangliu/
    欢迎转载,分享快乐! 如果觉得这篇文章对你有用,请抖抖小手,推荐一下!

  • 相关阅读:
    【转载】Myeclipse如何自动创建hibernate
    win7 64位mysql安装及navicat 解压版
    NuGet套件还原步骤(以vs2012为例)
    Html.DropDownListFor() 二级联动 ($.getJSON)
    ModelState验证部分属性
    asp.net mvc发送邮件
    SpringBoot的热部署
    SpringBoot 入门demo
    集群、负载均衡、微服务、分布式的概念
    SpringBoot 简介
  • 原文地址:https://www.cnblogs.com/kuangliu/p/3474811.html
Copyright © 2020-2023  润新知