JS和JQ实现自适应的方法(放大缩小浏览器)

JS和JQ实现自适应的方法(放大缩小浏览器)

js实现的高度自适应方法如下://计算文档的可见高度function windowHeight() //windo...

位置:首页 > 公司动态 > 前端课堂 > JS和JQ实现自适应的方法(放大缩小浏览器)

JS和JQ实现自适应的方法(放大缩小浏览器)

1333210.jpg

js实现的高度自适应方法如下:

//计算文档的可见高度
function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}
//window.onresize是窗口改变大小的时候,因为窗口改变大小,文档的可见高度或宽度会变化。
window.onload=window.onresize=function(){
 var wh=windowHeight();
 document.getElementById(“contentWrap”).style.height = document.getElementById(“sidebar”).style.height = (wh-document.getElementById(“header”).offsetHeight-document.getElementById(“footer”).offsetHeight)+”px”;
}


JQ实现容器自适应方法(等同于上面的JS)如下:

$(document).ready(function(){
$(window).resize();
});
$(window).resize(function(){
    //这里写内容

});


$(window).resize(function() {})这个不能一加载就执行哦?只有窗口改变时才执行!
window.onload=window.onresize = function(){}这个是一加载完就先执行一次再执行窗体改变事件的

所以如上代码!




JS实现自适应框架案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>js实现的自适应高度</title>    
<style type="text/css">    
* {    
	margin:0px;    
	padding:0px;    
}    
html, body {    
	height:100%;    
}    
#wrap {    
	height:100%;    
}    
#header {    
	height:65px;    
	background:#CDCDCD;    
}    
#contentWrap {    
	width:300px;    
	float:left;    
	background:green;    
}    
#content {    
}    
#sidebar {    
	background:white;    
	margin-left:300px;    
	overflow:auto;    
	background:#FFFFCC;    
}    
#sidebarContent {    
	margin:2px;    
}    
#footer {    
	height:30px;    
	background:#999;    
	margin-top:-30px;    
}    
</style>    
<script>    
function windowHeight() {    
var de = document.documentElement;    
return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;    
}    
window.onload=window.onresize=function(){    
	var wh=windowHeight();    
	document.getElementById("contentWrap").style.height = document.getElementById("sidebar").style.height = (wh-document.getElementById("header").offsetHeight-document.getElementById("footer").offsetHeight)+"px";    
}    
</script>    
</head>    
<body>    
<div id="wrap" class="clear">    
<div id="header">头部</div>    
<div id="contentWrap">    
<div id="content">左侧</div>    
</div>    
<div id="sidebar">    
<div id="sidebarContent"> sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
sidebar<br />    
</div>    
</div>    
</div>    
<div id="footer">底部</div>       
</body>    
</html>


关键词:

上一篇: 使用Jquery实现 倒计时效果

下一篇: 今日油价接口 全国省市今日油价数据实现

版权所有www.Zding.cn © 2017 贵州钟鼎网络科技有限责任公司 版权所有. 黔ICP备11002213号-8
贵州北京上海云南海南0851-82216110
观望只会错过创造美好的机会
线上服务咨询 0851-82216110 填写需求索取报价