如何自动在html页面加载时动态改变div等元素的高度和宽度

这里需要用到jquery ＋ css。原理是在页面加载时用javascript去动态改变一个class的高度和宽度。这样结合javascript能动态获取浏览器／页面的高度和宽度，从而使得div能动态的跟随浏览页面的大小变化而变化并且不影响高宽比。下面的代码创建一个手机页面，每一行三个图片分占33%，每个图片div的高和宽会随着浏览器的大小变化而自适应。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>test photoview</title>
</head>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

    function pageload()
    {
        var size = {
            width: window.innerWidth || document.body.clientWidth,
            height: window.innerHeight || document.body.clientHeight
        }

        var cw = (size.width - 60) / 3;
        $(‘.autowidth‘).css({ ‘width‘: cw + ‘px‘ });
        $(‘.autowidth‘).css({ ‘height‘: cw + ‘px‘ });
    }

    window.onload = pageload;

</script>

<style>
    .bodyclass{
        background-color:#dedbdb;
    }
    .studentblock {
        font-family:微软雅黑;
    }
    .studentblock:hover {
        border:2px solid blue;
        border-color:blue;
        cursor:pointer;
    }
    .autowidth {
        height:100px;
        background-size:cover;
        margin-left:8px;
        margin-top:0px;
    }
    .autowidth:hover {
        border: 2px solid blue;
        cursor: pointer;
    }
    .tdsection {
        width:33%;
        padding-bottom:5px;
    }
</style>

<body class="bodyclass">
<div style="width:100%;height:1000px;overflow-x:hidden;overflow-y:hidden;">
    <table style="width:100%">
        <tr>
            <td class="tdsection">
                <div class="autowidth" style="background-image:url(‘image/people1.jpg‘);"></div>
                <div style="background-color:#ffffff;margin-left:8px;font-family:微软雅黑;text-align:center;">春游</div>
            </td>

            <td class="tdsection">
                <div class="autowidth" style="background-image:url(‘image/people1.jpg‘);""></div>
                <div style="background-color:#ffffff;margin-left:8px;align-content:center;font-family:微软雅黑;text-align:center;">春游</div>
            </td>

            <td class="tdsection">
                <div class="autowidth" style="background-image:url(‘image/people1.jpg‘);"></div>
                <div style="background-color:#ffffff;margin-left:8px;align-content:center;font-family:微软雅黑;text-align:center;">春游</div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
时间： 2024-10-27 05:12:39

如何自动在html页面加载时动态改变div等元素的高度和宽度的相关文章

Javascript在页面加载时的执行顺序【转】

一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="

页面加载时让其显示笼罩层与加载等待图片

页面加载时让其显示笼罩层与加载等待图片(结局比较完美,过程很坎坷,所以一定总结整理下,备用): 用了ajax异步,是因为js内容不能即时的显示出来,因为js是单线程,要把队列中的任务执行完后才会执行刚才对js的处理 要用beforeSend,complete的时候必须要用ajax异步 beforeSend: function () {},//程序一开始便会执行该函数,使用该方法必须使用异步ajax complete: function () {},//complete在success或error

页面加载时的 Loading 效果

//页面加载时的 Loading 效果 $(window).load(function () { window.setTimeout(function () { $('body').removeClass('loading'); }, 1000); }); 上面的JS部分: HTML 部分 <body class="loading"> <div class="main"> </div></body> css .load

jquery 页面加载时获取图片高度

$(function () { $(window).load(function(){ alert($('img').height()); }); }); jquery 页面加载时获取图片高度

ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLength="10" Width="166px" Text="请输入用户名" OnFocus="javascript:if(this.value=='请输入用户名') {this.value='';this.style.color='#000

JSFF或JSF页面加载时触发JavaScript之方法

现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生成这些页面元素的JS脚本放到JSFF时就会发现,JS脚本只在我们进入TaskFlow的第一个View被执行了,进入后续View时,后续View的JS代码加载和执行. 分析 通过分析,发现当进入TaskFlow的第一个View时,第一个View中通过<af:resource/>标签引入的JS代码能成

aspx页面加载时清掉缓存

今天遇到一个问题,账户退出后登陆其他账户仍然显示上个账户用户名, 用了session.clear();session.abandon();context.Session["姓名"] = "";都不管用 最后在aspx页面加载时加上下面代码就可以了 Response.Expires = 0;Response.Cache.SetNoStore(); Response.AppendHeader("Pragma", "no-cache"

页面加载时的div动画

用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.css/参考所需要的动画效果 div{ opacity:0; } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate

页面加载时遮罩效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>页面加载时遮罩效果</title>        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>