利用html和Jquery實現照片牆（點選之後放大，再點選縮小）
阿新 • • 發佈：2018-12-31
<!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>