Jquery使容器自适应浏览器窗口

一、几个关键点

1:当文档大小改变时可以通过哪个事件来触发?

resize([Data], fn) 可传入data供函数fn处理。

示例:

$(window).resize(function(){
    alert("Stop it!");
});  

     2:怎样获得浏览器窗口的宽度高度?

获取当前浏览器窗口的宽度

$(window).width(); 

    获取第一段的宽

$("p").width()

   获取当前HTML文档宽度

$(document).width();

3:怎样赋值?

方法很多,可以通过css(...)、width(...)等

二、举个例子

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery自适应demo</title>
</head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    //初始化宽度、高度
    $("#div1").width($(window).width());
    $("#div1").height($(window).height());
    //当文档窗口发生改变时 触发
    $(window).resize(function(){
        $("#div1").width($(window).width());
        $("#div1").height($(window).height());
    })
    })
</script>
<body style="margin:0;">
    <div id="div1" style="background:#09F">
        这是一个可以自适应窗口的DIV
    </div>
</body>
</html>  
时间: 2024-07-29 08:36:22

Jquery使容器自适应浏览器窗口的相关文章

echarts使图标能自适应浏览器窗口变化,及经纬度转换

1.echarts使图标能自适应浏览器窗口变化 window.onresize = function () { myChart.resize(); //使第一个图表适应 myChart_pieMain.resize(); // 使第二个图表适应 } 2.map地图中经纬度与平面坐标转换 var arr = [117,36.4]; alert(myChart.chart.map.getPosByGeo("china",arr));  //map经纬度转成平面坐标 版权声明:本文为博主原创

jquery实现div自适应浏览器高度

<!DOCTYPE html><html><head><meta charset=UTF-8 /><title>jquery实现div自适应浏览器高度(宽度)</title><meta name="keywords" content="html5" /><meta name="description" content="html5 test&quo

让div自适应浏览器窗口居中显示

今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1"> <div class="div2">自适应浏览器水平垂直居中</div> </div> css代码: .div1{ width: auto; height: 600px; background: #cccccc; position:

图片自适应浏览器窗口宽度——就是响应式图片等比缩放效果

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>图片宽度自适应</title>    <style type="text/css">        img{            max-width: 100%;//一个max-width解决图片响应式       

表格自动适应浏览器大小及DIV浮动设计(页面自适应浏览器大小)

一.表格自适应浏览器大小 之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小. 解决方法: 1.一般是给表格整体使用样式:table-layout:fixed: 2.将表格中的各个单元格的width和height属性值设为比例,而不是给定值. <table style="width:100%"> <tr> <td style="width:20%">skinny cell&l

常用高度——获取浏览器窗口的高度(jquery和js)

jquery的用法: <script type="text/javascript"> $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 (这儿也是包括滚动条的) alert($(document.body).height());//浏览器时下窗口文档body的高度 (这儿也是包括滚动条的)

JQuery 获取元素到浏览器可视窗口边缘的距离

获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js Bootstrap-3.3.7-dist 下载地址: https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip

jQuery 尺寸:处理元素和浏览器窗口的尺寸

jQuery 尺寸 通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框

使用jQuery和Bootstrap实现多层、自适应模态窗口

本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即第二层模态窗口打开的时候,无法关闭第一层模态窗口. 具体页面实现部分如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title