序言
相册这个模块之前一直在使用从网上找的模板，但我想自己设计一个相册，说干就干就有了现在的相册，如下图所示：
正文
实现原理也很简单，布局分为三个模块，左右和中间，中间大的模块的大小由浏览器窗口大小决定，但因为我的照片有一定的长宽比，所以思路是获取浏览器窗口的高，再拿高乘以这个比例就得到中间模块的宽，左右两边长度是浏览器窗口的宽减去中间模块长再除以二，宽是浏览器的高除以四。效果做的也比较少，做了鼠标移动到哪张照片中间模块就显示哪张照片，并且选中的照片有高亮效果，中间模块照片可以缩放，并且整个框架大小不会变化。浏览器进行缩放各部分代码如下：
html
<body > <!--表示超出页面Y就隐藏 -->
<div class="nav">
<div class="picleft">
<ul>
<li><img src="http://img.bossdong.cn/xiangce/1.jpg" alt=""></li>
<li><img src="http://img.bossdong.cn/xiangce/2.jpg" alt=""></li>
<li><img src="http://img.bossdong.cn/xiangce/3.jpg" alt=""></li>
<li><img src="http://img.bossdong.cn/xiangce/4.jpg" alt=""></li>
</ul>
</div>
<div class="picmid"><img class="pic"></a></div>
<div class="picright">
<ul>
<li><img src="http://img.bossdong.cn/xiangce/5.jpg" alt=""></li>
<li><img src="http://img.bossdong.cn/xiangce/6.jpg" alt=""></li>
<li><img src="http://img.bossdong.cn/xiangce/7.jpg" alt=""></li>
<li><img src="http://img.bossdong.cn/xiangce/8.jpg" alt=""></li>
</ul>
</div>
</div>
<!--右边和中间模块中间出现白框的原因是右侧滑动栏占据了px-->css
<style>
* {
margin: 0;
padding: 0;
}
body{/*隐藏浏览器滑动栏*/
overflow-y: hidden;
overflow-x: hidden;
}
.picleft{
position: absolute;
left: 0;
float: left;
}
.picleft ul{
font-size:0;
}
.picright ul{
font-size:0;
}
.picright{
position: absolute;
right:0;
margin: 0;
padding: 0;
}
.picrleft li {
list-style: none;
}
.picright li {
list-style: none;
}
.picleft li img{
width: 265.459px;
height: 188.6px;
z-index: 999;
opacity:0.8;
}
.picright li img{
width: 265.459px;
height: 188.6px;
z-index: 999;
opacity:0.8;
}
.pic{
position: absolute;
height: 754.2px;
width: 1005px;
float: left;
left:265.459px;
background-size: 1005px 754px;
background-image: url(http://img.bossdong.cn/xiangce/1.jpg);
overflow: hidden;
}
.picmid{
background-image: url(http://img.bossdong.cn/xiangce/1.jpg) ;
overflow: hidden;/*超出模块部分隐藏起来*/
}
</style>js
<script>
$(window).resize(function () {
// 照片大小模块
var x = 3648/2736;
var winwidth = $(this).width();
var winheight = $(this).height();
// console.log(winheight)
console.log(picmid.offsetBottom);
// if(winheight==93){
// }
var picmidwidth = winheight*x;
var picmidleft = (winwidth-picmidwidth)/2;
var picleftwidth = (winwidth-picmidwidth)/2;
var picleftheight = winheight/4;
var picrightwidth = (winwidth-picmidwidth)/2;
var picrightheight = winheight/4;
$('.pic').css('height',winheight);
$('.pic').css('width',picmidwidth);
$('.picmid >img').css('left',picmidleft);
$('.pic').css('background-size','picmidwidth winheight');
$('.picleft li>img').css('width',picleftwidth);
$('.picleft li>img').css('height',picleftheight);
$('.picright li>img').css('height',picleftheight);
$('.picright li>img').css('width',picleftwidth);
});
// 功能模块
// 左侧
var leftlis = document.querySelector('.picleft').querySelectorAll('img');
var picmid = document.querySelector('.pic')
// console.log(leftlis.length);
picmid.style.backgroundImage = "url(http://img.bossdong.cn/xiangce/9.jpg)";
for (var i=0;i<leftlis.length;i++){
leftlis[i].onmouseenter = function () {
// console.log(this.src);
//this.src 记录这个的路径
// 把这个路径给body
picmid.style.backgroundImage = "url(" + this.src+ ")";
this.style.opacity = 1;
}
leftlis[i].onmouseleave = function () {
// console.log(this.src);
//this.src 记录这个的路径
// 把这个路径给body
this.style.opacity = 0.5;
}
}
// 右侧
var rightlis = document.querySelector('.picright').querySelectorAll('img');
// console.log(rightlis.length);
for (var i=0;i<rightlis.length;i++){
rightlis[i].onmouseenter = function () {
// console.log(this.src);
//this.src 记录这个的路径
// 把这个路径给body
picmid.style.backgroundImage = "url(" + this.src+ ")";
this.style.opacity = 1;
}
rightlis[i].onmouseleave = function () {
this.style.opacity = 0.5;
}
}
</script>
更新思路
做一个自适应窗口大小的就可以了