<!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. IOS DatePicker 和 UIBarButtonItem 常用属性

    - (void)viewDidLoad { [super viewDidLoad]; // // self.inputTextField.inputView = [[UISwitch alloc ] ...

  2. spark 之knn算法

    好长时间忙的没写博客了.看到有人问spark的knn,想着做推荐入门总用的knn算法,顺便写篇博客. 作者:R星月  http://www.cnblogs.com/rxingyue/p/6182526 ...

  3. 博弈论经典算法（一）——对抗搜索与Alpha-Beta剪枝

    前言 在一些复杂的博弈论题目中,每一轮操作都可能有许多决策,于是就会形成一棵庞大的博弈树. 而有一些博弈论题没有什么规律,针对这样的问题,我们就需要用一些十分玄学的算法. 例如对抗搜索. 对抗搜索简介 ...

  4. ubuntu jdk install

    1.下载jdk-7u75-linux-x64.tar.gz,默认在/home/csf/Downloads 2.csf@ubuntu:~/Downloads$ sudo mkdir /usr/java ...

  5. response.setContentType("text/html;charset=utf-8")后依然乱码的解决方法

    从浏览器获取数据到服务器,服务器将得到数据再显示在浏览器上英文字母正常显示,中文字符乱码的问题,已经使用了 response.setContentType("text/html;charse ...

  6. wepy框架构建小程序（1）

    wepy框架构建小程序(1) 基本操作: # 安装脚手架工具 npm install wepy-cli -g # 创建一个新的项目 npm init standard myproject # 进入新项 ...

  7. JAVA JDBC 连接 Oracle

    使用 Junit 测试类编写 public class JdbcTest { private Connection con = null;// 创建一个数据库连接 private PreparedSt ...

  8. 洛谷P1049装箱问题

    一句话刚刚的题会了,这题能不会么. #include<bits/stdc++.h> using namespace std; int main(){ int n,m; cin>> ...

  9. [BZOJ] 3301: [USACO2011 Feb] Cow Line

    康拓展开/逆展开 模板 #include<algorithm> #include<iostream> #include<cstdio> #define int lo ...

  10. Centos7之Nginx

    1.安装 下载RPM: wget http://nginx.org/download/nginx-1.16.0.tar.gz 解压:tar -zxf nginx-1.16.0.tar.gz 安装: c ...