码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-06 15:12:05      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:适应   http   大小   pre   容器   win   span   str   size   

一、几个关键点

      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>  

 

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

标签:适应   http   大小   pre   容器   win   span   str   size   

原文地址:http://www.cnblogs.com/shuilangyizu/p/6816749.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!