• 窗口事件onresize


    在做自适应布局的时候,我们常常需要根据窗口不同的分辨率给出不同布局和样式,今天说的onresize便能帮我们实现这一效果。

    onresize事件在窗口或者框架的大小发生改变的时候会被调用,下面我们用一个例子来演示。

    在这个例子中,我们想要实现的效果是:当屏幕宽度小于500时,页面的背景色为灰色;当屏幕宽度大于等于500时,页面背景为粉色;当屏幕宽度大于等于800时,页面背景为红色。所以,我们首先需要获得屏幕的宽度,需要用到前面封装的client方法。

    <script>
       function client() {
        if(window.innerWidth){ 
            return {
                 window.innerWidth,
                height: window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat"){
            return {
                 document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
    
        return {
             document.body.clientWidth,
            height: document.body.clientHeight
        }
    }</script>

    要根据不同屏幕大小实现不同的效果,需要调用onresize事件。

    <script>
        window.onload = function () {
            window.onresize = function(){
                if(client().width >= 800){
                    document.body.style.backgroundColor = 'red';
                }else if(client().width >= 500){
                    document.body.style.backgroundColor =  'pink';
                }else {
                    document.body.style.backgroundColor =  'gray';
                }
            };   
        }
    </script>

    现在基本功能已经实现,但是,前面一直提到onresize是在屏幕变化的时候才会被触发调用,那么在初始化的时候,没有发生屏幕变化,那么上面的颜色改变就不会被触发,因此,我们需要将上面的代码进行稍微的调整优化。

    <script>
        window.onload = function () {
            var bgColor;
            // 初始化的时候触发
            changeColor();
            // 窗口大小改变是触发
            window.onresize = changeColor;
            function changeColor() {
                if(client().width >= 800){
                    bgColor = 'red';
                }else if(client().width >= 500){
                    bgColor =  'pink';
                }else {
                    bgColor =  'gray';
                }
                document.body.style.backgroundColor = bgColor;
            }
        }
    </script>

    至此,我们就利用onresize实现了想要的效果了。

    完整详细的代码下载:点这里

  • 相关阅读:
    2017.11.20 事务
    Linux常用指令
    11.17 知识整理
    不太熟的sql语句
    MySQL关联查询
    2017.11.09 vi编辑器指令
    Linux操作指令
    线程安全,同步锁(同步方法和同步代码)
    多线程
    序列化和反序列化
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9671942.html
Copyright © 2020-2023  润新知