<!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. m3u8视频下载方法

    部分网站的视频内容,采用了m3u8的格式.正常打开网页可以,但是如果想下载到本地,就存在一定问题了.这里可以再获取到m3u8地址之后,利用vlc软件,来下载m3u8的视频. 工具:Firefox浏览器 ...

  2. iOS界面设计切图小结

    iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:15 ...

  3. UVA 12161 Ironman Race in Treeland （树分治）

    题意:求树上的一条费用不超过m的路径,使得总长度尽量大. 人参第一发树分治,紫书上思路讲得比较清晰,这里不再赘述. 实现的时候,用一个类似时间戟的东西,记录结点首次访问的时间,并保存结点序列. 合并的 ...

  4. Memory Usage Performance Guidelines

    https://developer.apple.com/library/content/documentation/Performance/Conceptual/ManagingMemory/Arti ...

  5. 【BZOJ1088】[SCOI2005] 扫雷Mine（分类讨论）

    点此看题面 大致题意: 给你一个\(2*n\)的扫雷棋盘,现让你根据第二列的信息确定第一列有多少种摆法. 扫雷性质 听说这是一道动态规划+数学题. 其实,根据扫雷游戏的某个性质,只要确定了第一个格子是 ...

  6. SpringBoot学习记录(二)

    一. SpringBoot日志框架 SpringBoot:底层是Spring框架,Spring框架默认是用JCL(commons-logging): SpringBoot选用SLF4j和logback ...

  7. Wordpress菜单函数wp_nav_menu各参数详解及示例

    Wordpress菜单函数wp_nav_menu各参数详解及示例   注册菜单 首先要注册菜单,将以下函数添加至function.php函数里   register_nav_menus(array( ...

  8. css代码

    #footr { background: #3e434a } #header #blogTitle { background: url("http://images.cnblogs.com/ ...

  9. vbs自由选择启动bat文件

    1.首先创建一个文件夹用来放bat文件和配置文件. 2.然后在bat文件中写入启动程序.中间红色框是启动程序,外面程序是用来隐藏命令提示符的. 3.txt配置文件配置vbs启动项,vbs只能找到此文件 ...

  10. daemon函数实现原理 守护进程

    linux提供了daemon函数用于创建守护进程,实现原理如下: #include <unistd.h> int daemon(int nochdir, int noclose); 1．  ...