<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script src="jq.js"></script>

    <script>

        //需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。

        //  // >960红色，大于640小于960蓝色，小于640绿色。

        //步骤：

        //1.老三步

        //2.判断。

        //3.上色

        window.onresize=fn;

        fn();

        function fn(){

        	if (client().width>960) {

        		document.body.style.backgroundColor="red";

        	}else if (client().width>640) {

        		document.body.style.backgroundColor="blue";

        	}else{

        		document.body.style.backgroundColor="green";

        	}

        }

        //1.老三步

        //页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色

        //封装成函数，然后指定的时候去调用和绑定函数名

            //2.判断。

            //3.上色

    </script>

</body>

</html>

　　Javascript 运动框架

/**

 * Created by Lenovo on 2016/9/11.

 */

function show(ele){

    ele.style.display = "block";

}

/**

 * 获取元素样式兼容写法

 * @param ele

 * @param attr

 * @returns {*}

 */

function getStyle(ele,attr){

    if(window.getComputedStyle){

        return window.getComputedStyle(ele,null)[attr];

    }

    return ele.currentStyle[attr];

}

//参数变为3个

function animate(ele,json,fn){

    //先清定时器

    clearInterval(ele.timer);

    ele.timer = setInterval(function () {

        //开闭原则

        var bool = true;

        //遍历属性和值，分别单独处理json

        //attr == k(键)    target == json[k](值)

        for(var k in json){

            //四部

            var leader = parseInt(getStyle(ele,k)) || 0;

            //1.获取步长

            var step = (json[k] - leader)/10;

            //2.二次加工步长

            step = step>0?Math.ceil(step):Math.floor(step);

            leader = leader + step;

            //3.赋值

            ele.style[k] = leader + "px";

            //4.清除定时器

            //判断: 目标值和当前值的差大于步长，就不能跳出循环

            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

            if(json[k] !== leader){

                bool = false;

            }

        }

        console.log(1);

        //只有所有的属性都到了指定位置，bool值才不会变成false；

        if(bool){

            clearInterval(ele.timer);

            //所有程序执行完毕了，现在可以执行回调函数了

            //只有传递了回调函数，才能执行

            if(fn){

                fn();

            }

        }

    },1);

}

//获取屏幕可视区域的宽高

function client(){

    if(window.innerHeight !== undefined){

        return {

            "width": window.innerWidth,

            "height": window.innerHeight

        }

    }else if(document.compatMode === "CSS1Compat"){

        return {

            "width": document.documentElement.clientWidth,

            "height": document.documentElement.clientHeight

        }

    }else{

        return {

            "width": document.body.clientWidth,

            "height": document.body.clientHeight

        }

    }

}

　　

根据窗口尺寸onresize判断窗口的大小的更多相关文章

  1. UI: 窗口全屏, 窗口尺寸

    窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns=&quo ...

  2. 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸

    [源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/F ...

  3. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  4. Windows 系统上用 .NET/C# 查找所有窗口，并获得窗口的标题、位置、尺寸、最小化、可见性等各种状态

    原文:Windows 系统上用 .NET/C# 查找所有窗口,并获得窗口的标题.位置.尺寸.最小化.可见性等各种状态 在 Windows 应用开发中,如果需要操作其他的窗口,那么可以使用 EnumWi ...

  5. wxWidgets源码分析(7) - 窗口尺寸

    目录 窗口尺寸 概述 窗口Size消息的处理 用户调整Size消息的处理 调整窗口大小 程序调整窗口大小 wxScrolledWindow设置窗口大小 获取TextCtrl控件最合适大小 窗口尺寸 概 ...

  6. VC中判断指定窗口是否被其他窗口遮挡

    本来是想判断当前窗口是否在最前面,无奈办法用尽就是不行,于是想换个思路:判断指定窗口是否被其他窗口遮挡.然后掘网三尺,找到了这个: bool CTestTray2Dlg::IsCoveredByOth ...

  7. wap网页、微信内嵌网页在手机端页面窗口尺寸如何不缩放

    如何让wap网页.微信内嵌网页内容(尺寸和文字)在手机端页面窗口尺寸不被强制缩放 在head中加入: <meta http-equiv="Content-Type" cont ...

  8. node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

    效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...

  9. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

随机推荐

  1. 渐变色在IE9以下包括IE9的使用

    因为是不支持gradient的.所以需要使用如下属性,该属性不适用于safria浏览器,并且,#fff不可以简写,要写成#ffffff这样的形式 FILTER: progid:DXImageTrans ...

  2. GC Root总结

    为什么80%的码农都做不了架构师?>>> JVM根据GC Roots算法判定一个对象需要被回收,GC Roots一般在JVM的栈区域里产生. GC Roots原理 GC Roots基 ...

  3. Jmeter模拟http请求

    一.获取用户信息(GET请求):http://hostname/getuser?userid=1 1.打开jmeter,创建一个线程组,再添加一个http请求Sampler 2.设置域名.路径.请求方 ...

  4. python之列表推导、迭代器、生成器

    http://blog.chinaunix.net/uid-26722078-id-3484197.html 1.列表推导 看几个例子,一切就明白了. #!/usr/bin/python number ...

  5. 51nod——1285 山峰和分段（暴力出奇迹）

    要求每段的点数都一样,因此分的段数cnt肯定是n的因子,要求每段都有山峰,因此cnt肯定小于等于山峰数量.分段的宽度d=n/cnt,对山峰数量做一个前缀和,检查一下每一段的山峰数量是否没有增加即可. ...

  6. 1061: [Noi2008]志愿者招募

    Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 5742  Solved: 3449[Submit][Status][Discuss] Descript ...

  7. 自封装的AJAX

    /* * *create by royal in 2019/1/23 * *royalAjax 自封装ajax函数 * *paramsObj JSON类型参数 *require params: * t ...

  8. XPATH如何选择,t选取,包含某一属性的节点, 不包含某一个属性的节点?

    https://blog.csdn.net/manmanpa/article/details/56282741 //tbody/tr[@class] 包含 //tbody/tr[not(@class) ...

  9. 微信公众帐号开发之一（java）

    闲来没事,就记录一下微信公众平台的开发吧~ 其实微信公众平台开发没有想象中的那么困难,因为注册了微信公众平台帐号登录之后在开发者模式里有详细的文档,个人感觉介绍还是比较详细的. 微信公众平台订阅号和服 ...

  10. 一道JS面试题所引发的"血案"，透过现象寻本质，再从本质看现象

    觉得本人写的不算很烂的话,可以登录关注一下我的GitHub博客,新手写东西写的不好之处,还望见谅,毕竟水平有限,写东西只为交流提高,一起学习,还望大神多加指点,指出纰漏,和提出宝贵的意见,博客会坚持写 ...