demo2---電子相冊
阿新 • • 發佈：2017-08-19
hid ack 自動擴展 gda meta 綁定 height scrip java
使一個元素在另一個元素內絕對居中，可以通過絕對定位和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); }); })
demo2---電子相冊