导航

电子相册

Posted on 2017-08-18 22:14  耍流氓的兔兔  阅读(145)  评论(0)  编辑  收藏  举报 
使一个元素在另一个元素内绝对居中，可以通过绝对定位和margin:auto;的方式
.center_xy{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
如何使元素内容滚动：
　　overflow:auto;

锚点：
　　<a>标签的锚点可以和id绑定，<a href="#id">跳转到锚点所在的元素，#代表当前页面

防止class名起冲突：
　　在命名时加上外部的class名

设置最小宽度，以便容器内容为空时可显示默认宽度，内容较多时自动扩展

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../demo1/demo1.css" />
    </head>
    <body>
        <div class="mainbox center_xy">
            <div class="title">图片展示</div>
            <hr>
        </div>    
        
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="../js/imgdata.js" ></script>
        <script type="text/javascript" src="../js/demo1.js" ></script>
    </body>
</html>
.center_xy{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.mainbox{
    width: 600px;
    height: 400px;
    
    border: 2px solid #888;
    background: #fff;
    
    overflow: hidden;
}
.title{
    height: 35px;
    color: #888;
    font-size: 24px;
    line-height: 35px;
    text-align: center;    
}
hr{
    border: 1px dashed #888;
}
#bigimgbox{
    width: 390px;
    height: 340px;
    
    margin-left: 5px;
    border: 1px solid #888;
    background: #ccc;
    float: left;
    overflow: hidden;
}
#bigimgbox img{
    width: 97%;
    height: 97%;
    
    margin: 5px;
    border: 1px solid #aaa;
    overflow: hidden;
}
.minimgbox{
    width: 190px;
    height: 340px;
    
    margin-left: 5px;
    border: 1px solid #888;
    background: #ccc;
    float: left;
    overflow: auto;
}
.minimgbox img{
    width: 97%;
    height: 30%;
    
    margin-left: 2px;
    margin-top: 3px;
    border: 1px solid #aaa;
}
$(function(){
    var $mainbox = $(".mainbox");
    var $bigimgbox = $("<div id = 'bigimgbox'></div>");
    var $minimgbox = $("<div class = 'minimgbox'></div>");
    
    $mainbox.append($bigimgbox);
    $mainbox.append($minimgbox);

    $.each(imgdata, function(i,o) {
        var $bigimg = $("<img src='"+o.img+"' id='"+o.name+"'>");
        $bigimgbox.append($bigimg);
        
        var $minimg = $("<a href='#"+o.name+"'><img src='"+ o.img +"'></a>");
        $minimgbox.append($minimg);
    });
})