1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.  
  9. <script src="jq.js"></script>
  10.     <script>
  11.         //需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
  12.         //  // >960红色，大于640小于960蓝色，小于640绿色。
  13.         //步骤：
  14.         //1.老三步
  15.         //2.判断。
  16.         //3.上色
  17.         window.onresize=fn;
  18.  
  19.         fn();
  20.  
  21.         function fn(){
  22.         	if (client().width>960) {
  23.         		document.body.style.backgroundColor="red";
  24.  
  25.         	}else if (client().width>640) {
  26.  
  27.         		document.body.style.backgroundColor="blue";
  28.  
  29.         	}else{
  30.         		document.body.style.backgroundColor="green";
  31.         	}
  32.         }
  33.         //1.老三步
  34.         //页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
  35.  
  36.         //封装成函数，然后指定的时候去调用和绑定函数名
  37.             //2.判断。
  38.             //3.上色
  39.  
  40.     </script>
  41. </body>
  42. </html>

　　Javascript 运动框架

  1. /**
  2.  * Created by Lenovo on 2016/9/11.
  3.  */
  4. function show(ele){
  5.     ele.style.display = "block";
  6. }
  7.  
  8. /**
  9.  * 获取元素样式兼容写法
  10.  * @param ele
  11.  * @param attr
  12.  * @returns {*}
  13.  */
  14. function getStyle(ele,attr){
  15.     if(window.getComputedStyle){
  16.         return window.getComputedStyle(ele,null)[attr];
  17.     }
  18.     return ele.currentStyle[attr];
  19. }
  20.  
  21. //参数变为3个
  22. function animate(ele,json,fn){
  23.     //先清定时器
  24.     clearInterval(ele.timer);
  25.     ele.timer = setInterval(function () {
  26.         //开闭原则
  27.         var bool = true;
  28.  
  29.         //遍历属性和值，分别单独处理json
  30.         //attr == k(键)    target == json[k](值)
  31.         for(var k in json){
  32.             //四部
  33.             var leader = parseInt(getStyle(ele,k)) || 0;
  34.             //1.获取步长
  35.             var step = (json[k] - leader)/10;
  36.             //2.二次加工步长
  37.             step = step>0?Math.ceil(step):Math.floor(step);
  38.             leader = leader + step;
  39.             //3.赋值
  40.             ele.style[k] = leader + "px";
  41.             //4.清除定时器
  42.             //判断: 目标值和当前值的差大于步长，就不能跳出循环
  43.             //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
  44.             if(json[k] !== leader){
  45.                 bool = false;
  46.             }
  47.         }
  48.  
  49.         console.log(1);
  50.         //只有所有的属性都到了指定位置，bool值才不会变成false；
  51.         if(bool){
  52.             clearInterval(ele.timer);
  53.             //所有程序执行完毕了，现在可以执行回调函数了
  54.             //只有传递了回调函数，才能执行
  55.             if(fn){
  56.                 fn();
  57.             }
  58.         }
  59.     },1);
  60. }
  61.  
  62. //获取屏幕可视区域的宽高
  63. function client(){
  64.     if(window.innerHeight !== undefined){
  65.         return {
  66.             "width": window.innerWidth,
  67.             "height": window.innerHeight
  68.         }
  69.     }else if(document.compatMode === "CSS1Compat"){
  70.         return {
  71.             "width": document.documentElement.clientWidth,
  72.             "height": document.documentElement.clientHeight
  73.         }
  74.     }else{
  75.         return {
  76.             "width": document.body.clientWidth,
  77.             "height": document.body.clientHeight
  78.         }
  79.     }
  80. }

　　

根据窗口尺寸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 当一个控件被添加到父控件中会调用（didMoveToSuperview）

    /** * 当一个控件被添加到父控件中就会调用 */ - (void)didMoveToSuperview { if (self.group.opened) { self.nameView.image ...

  2. UVA1363 - Joseph's Problem（数学，迷之优化）

    题意:给出n和k,1≤n,k≤1e9,计算 切入点是k/i 和 k/(i+1)差距不大.令pi = k/i, ri = k%i.如果pi+1 == pi,那么ri+1 == k - pi(i+1) = ...

  3. Spark性能优化——和shuffle搏斗

    Spark的性能分析和调优很有意思,今天再写一篇.主要话题是shuffle,当然也牵涉一些其他代码上的小把戏. 以前写过一篇文章,比较了几种不同场景的性能优化,包括portal的性能优化,web se ...

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

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

  5. 干净的架构The Clean Architecture_软件架构系列

    本文转载自:https://www.jdon.com/artichect/the-clean-architecture.html ,这个博客站很有历史了,博主经常翻译Github大牛的文章,值得墙裂推 ...

  6. Map和Set -----JavaScript

    本文摘要:http://www.liaoxuefeng.com/ JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaSc ...

  7. 问题007：JDK版本与JRE版本不同导致java.exe执行类文件错误 java.lang.UnsupportedClassVersionError错误

    版本不同的原因是,Windows 系统之前安装了JRE 是别的版本的 解决方法,将其卸载,卸载后可以正常使用,不再错误提示.

  8. C/C++程序基础 （六）面向对象

    类的特性 抽象.封装.继承.多态.重载 class 和 struct 区别 C中struct仅仅可以包含数据成员,不可以有成员函数,属于复杂数据结构. C++ 中struct成员访问权限默认为publ ...

  9. 嵌入式linux：通过qemu模拟mini2440开发环境

    1 编译安装QEMU 首先下载qemu for mini2440,直接打包下载 http://repo.or.cz/w/qemu/mini2440.git/snapshot/HEAD.tar.gz  ...

  10. Linux下启动、停止xampp命令

    启动xampp: /opt/lampp/./lampp start 停止xampp: /opt/lampp/./lampp stop 卸载xampp: rm -rf /opt/lampp