javascript事件基础--窗口重置（resize事件）和页面滚动（scroll事件）

最新推荐文章于 2024-03-06 16:47:24 发布

wenmin1987

最新推荐文章于 2024-03-06 16:47:24 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签：窗口重置页面滚动

本文链接：https://blog.csdn.net/wenmin1987/article/details/88833002

版权

JavaScript 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

浏览器窗口重置时触发（调整窗口大小，最大化，最小化）：resize

<body>
       <div id="box"></div>
       <script type="text/javascript">
           var box=document.getElementById("box");
           box.style.position="absolute";
           box.style.backgroundColor="red";
           box.style.width=w()*0.8+"px";
           box.style.height=h()*0.8+"px";
           window.οnresize=function(){
           box.style.width=w()*0.8+"px";
           box.style.height=h()*0.8+"px";
           }
           function w(){
               if(window.innerWidth){//兼容DOM
                   return window.innerWidth;
               }else if(document.body){
                   return document.body.clientWidth;//兼容IE
               }
           }
           function h(){
               if(window.innerHeight){
                   return window.innerHeight;
               }else if(document.body){
                   return document.body.clientHeight;
               }
           }
       </script>
   </body>

控制box始终位于窗口内坐标（100px,100px）

<div id="box"></div>
       <div id="ddd" style="width:100px;height:100px;background-color: #0000FF;">

       </div>
       <div style="height:5000px;width: 5000px;background-color: blueviolet;">

       </div>
       <script type="text/javascript">
           var box=document.getElementById("box");
           box.style.position="absolute";
           box.style.backgroundColor="red";
           box.style.width="200px";
           box.style.height="160px";
           window.οnlοad=f; //页面初始化时固定其位置
           window.onscroll=f;//元素位置固定函数
           function f(){
               box.style.left=100+parseInt(document.body.scrollLeft)+parseInt(document.documentElement.scrollLeft)+"px";
               box.style.top=100+parseInt(document.body.scrollTop)+parseInt(document.documentElement.scrollTop)+"px";
           }

wenmin1987

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript事件基础--窗口重置（resize事件）和页面滚动（scroll事件）

浏览器窗口重置时触发（调整窗口大小，最大化，最小化）：resize<body> <div id="box"></div> <script type="text/javascript"> var box=document.getElementById("box"); ...
复制链接

扫一扫

专栏目录