利用html和Jquery实现照片墙（点击之后放大，再点击缩小）

60 阅读 0 评论 40 点赞

我是靠谱客的博主动人咖啡，最近开发中收集的这篇文章主要介绍利用html和Jquery实现照片墙（点击之后放大，再点击缩小），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
initimg();
initposition();
$(window).resize(initposition);
$(".wrap .imgs li").click(smallImg);
//初始化照片，循环拼接
function initimg(){
for(var i=1;i<=24;i++){
var $li = $("<li></li>");
$li.css({
"background":"url('img/"+i+".jpg')",
"background-size":"125px 125px"
}).addClass("smallImg");
$(".wrap .imgs").append($li);
}
}
//初始化照片定位
function initposition(){
var w = ($(".wrap").width()-125*6)/5;
var h = ($(".wrap").height()-125*4)/3;
//.each视为了循环每一张照片
$(".wrap li").each(function(index,element){
var left = index%6;
var top =parseInt(index/6);
$(element).css({
"left":(125+w)*left,
"top":(125+h)*top,
"box-shadow":"0px 0px 15px #f332e4",
"transform":"scale(0.9)"
});
});
}
//点击大图变回小图
function bigImg(){
$(".wrap .imgs li").each(function(index,element){
var i = index+1;
$(element).css({
"background":"url('img/"+i+".jpg')",
"background-size":"125px 125px"
});
});
initposition();
$(".wrap .imgs li").unbind("click").click(smallImg);
}
//点击小图变为大图
function smallImg(){
var imgsrc = $(this).css("background-image");
$(".wrap .imgs li").css({
"box-shadow":"0px 0px 0px 0px",
"transform":"scale(1)",
"backgroundImage":imgsrc,
"background-size":""
});
var w =($(".wrap").width()-125*6)/2;
var h =($(".wrap").height()-125*4)/2;
$(".wrap .imgs li").each(function(index,element){
var left = index%6;
var top = parseInt(index/6);
$(element).css({
"left":w+125*left,
"top":h+125*top,
"background-position":"-"+left*125+"px -"+top*125+"px"
});
});
$(".wrap .imgs li").unbind("click").click(bigImg);
}
})
</script>
<style>
*{
margin:0;
padding:0;
}
html{
height:100%;
}
.wrap{
height:90%;
width:90%;
border: 1px solid #f332e4;
box-shadow:0px 0px 5px #f332e4;
position:absolute;
top:5%;
left:5%;
}
.wrap li{
list-style: none;
width: 125px;
height:125px;
position:absolute;
transition:1s;
cursor:pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="imgs">
</ul>
</div>
</body>
</html>