• 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>  
  • 相关阅读:
    spring1冲刺感想与总结
    Scrum 项目7.0
    读《构造之法》8、9、10章有感
    Scrum4.0+5.0
    scrum3.0
    0512操作系统之进程调度
    Scrum 项目1.0
    团队之阅读感想
    sprint3终极演示
    0622—软件工程第一学期总结
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/6816749.html
Copyright © 2020-2023  润新知