根据窗口尺寸onresize判断窗口的大小
<!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判断窗口的大小的更多相关文章
- UI: 窗口全屏, 窗口尺寸
窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns=&quo ...
- 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸
[源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/F ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- Windows 系统上用 .NET/C# 查找所有窗口，并获得窗口的标题、位置、尺寸、最小化、可见性等各种状态
原文:Windows 系统上用 .NET/C# 查找所有窗口,并获得窗口的标题.位置.尺寸.最小化.可见性等各种状态 在 Windows 应用开发中,如果需要操作其他的窗口,那么可以使用 EnumWi ...
- wxWidgets源码分析(7) - 窗口尺寸
目录 窗口尺寸 概述 窗口Size消息的处理 用户调整Size消息的处理 调整窗口大小 程序调整窗口大小 wxScrolledWindow设置窗口大小 获取TextCtrl控件最合适大小 窗口尺寸 概 ...
- VC中判断指定窗口是否被其他窗口遮挡
本来是想判断当前窗口是否在最前面,无奈办法用尽就是不行,于是想换个思路:判断指定窗口是否被其他窗口遮挡.然后掘网三尺,找到了这个: bool CTestTray2Dlg::IsCoveredByOth ...
- wap网页、微信内嵌网页在手机端页面窗口尺寸如何不缩放
如何让wap网页.微信内嵌网页内容(尺寸和文字)在手机端页面窗口尺寸不被强制缩放 在head中加入: <meta http-equiv="Content-Type" cont ...
- node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
随机推荐
- Object.keys 函数 (JavaScript)
Object.keys 函数 (JavaScript) 返回对象的可枚举属性和方法的名称. 在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys() ...
- Android中的Matrix(矩阵)
写在前面 看这篇笔记之前先看一下参考文章,这篇笔记没有系统的讲述矩阵和代码的东西,参考文章写的也有错误的地方,要辨证的看. 如何计算矩阵乘法 android matrix 最全方法详解与进阶(完整篇) ...
- iOS解析新浪微博的@##以及URL链接并展示
最近在做一个跟微博相关的应用.其中涉及到了对微博中@.##以及URL链接的解析与展示.分享一下个人处理的方式,希望对需要的人有所帮助. 最终的展现效果: 首先,第一步是你得从纯文本中找到它们.毫无疑问 ...
- solr数据分片相关
solr操作url 使用正常的core,使用命令生成coillection solr create_collection -c students2 -d ../server/solr/my/conf ...
- 题解 P1319 【压缩技术】
这题是红题,我都觉得我的题解过不了 这道题输入不像别的题,给一个参数 n ,然后输入 n 的倍数个数据,它是给一个 n , 再输入一堆数.看题目,n × n ? 是不是就说明了给出的数和一定,都是 n ...
- Symfony相关网站参考
http://www.doctrine-project.org/projects.html 数据库相关知识 http://firehare.blog.51cto.com/809276/703599整合 ...
- 成员变量（实例变量）&局部变量&静态变量（类变量）的区别
成员变量(实例变量)&局部变量区别: (1)作用域 成员变量:针对整个类有效. 局部变量:只在某个范围内有效.(一般指的就是方法,语句体内) (2)存储位置 成员变量:随着对象的创建而存在,随 ...
- 【Django】URL中传递中文的问题
开发环境:Ubuntu16.04+Django 1.11.9+Python2.7 在开发中,在做查找某些信息这个功能的时候,遇到的一个问题.需要在URL中传递查找的关键字,当关键字为中文的时候,并不 ...
- .net core 在IIS上发布502问题
本来迁移一个项目到.net core就是一件体力活,要找各种替代包,还有一些函数/属性的不支持 总之很头疼... 不要问我为什么用了.net core还要Host在IIS上,国内用.net的公司普遍都 ...
- JavaScript 资源大全中文版
我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加 ...