首页 > 代码库 > 根据窗口尺寸onresize判断窗口的大小
根据窗口尺寸onresize判断窗口的大小
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src="http://www.mamicode.com/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判断窗口的大小
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。