根据窗口尺寸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 ...
随机推荐
- PHP:php遍历数组each()方法总结
each()的作用是将数组当前元素的键值对拆成一个新数组,并把下一个元素作为当前元素.比如Array(...,'Robert'=>'Bob',...)中的'Robert'=>'Bob'键值 ...
- UVA 12034 Race（递推）
递推,f[i = i个名次][j = 共有j个人] = 方案数. 对于新加入的第j个人,如果并列之前的某个名次,那么i不变,有i个可供并列的名次选择,这部分是f[i][j-1]*i, 如果增加了一个名 ...
- 【洛谷5390】[Cnoi2019] 数学作业（位运算）
点此看题面 大致题意: 给你一个集合,求所有子集异或和之和. 大致思路 首先,我们很容易想到去对二进制下每一位分别讨论. 枚举当前位,并设共有\(x\)个数当前位上为\(1\),则有\((n-x)\) ...
- Portal简介
Portal 在英语中是入口的意思.Portal 认证通常也称为 Web 认证,一般将 Portal 认 证网站称为门户网站. 未认证用户上网时,设备强制用户登录到特定站点,用户可以免费访问其中的服务 ...
- 解决wget下载https时报错 --no-check-certificate (不检查证书)
如果使用 wget下载https开头的网址域名 时报错,你需要加上 --no-check-certificate (不检查证书)选项 例如: wget https://pypi.python.org/ ...
- Python实现注册和登录
一.注册账号需要实现的功能 1.输入:用户名,密码,密码确认 2.限制1:输入的账号和密码不能为空 3.限制2:两次输入密码必须一致 4.限制3:用户名不能重复 5.限制4:错误次数为4次 6.用字典 ...
- 解决MySQL安装到最后一步未响应的三种方法
这种情况一般是你以前安装过MySQL数据库服务项被占用了.解决方法: 方法一:安装MySQL的时候在这一步时它默认的服务名是“MySQL” 只需要把这个名字改了就可以了.可以把默认的服务器的名称手动改 ...
- java中char类型转换成int类型的两种方法
方法一: char ch = '9'; if (Character.isDigit(ch)){ // 判断是否是数字 int num = Integer.parseInt(String.valueOf ...
- HTTP 配置与编译安装
目录 HTTP 配置与编译安装 HTTP 相关配置 DSO 定义'Main' Server 的文档页面路径 定义站点主页面 站点访问控制常见机制 基于源地址实现访问控制 日志设定 设定默认字符集 定义 ...
- 小程序wafer2操作数据库
小程序操作数据库 //小程序控制台phpmyadmin里给数据库cAuth添加表 //controllers/hello.js const { mysql } = require('../qcloud ...