【菜鸟手打js】@弹出遮罩层显示大图之二

来源：互联网发布：java等级编辑：程序博客网时间：2024/05/17 03:30

调整目标：1.弹出层获取图片集合，大图显示被点击的那张。

2.加左右切换按钮，切换集合中图片。

3.调整下弹出层样式。

最终效果是这样式的

弄成透明的比较顺眼，如果图片比较高就会出滚动条，像下面这个样子

样式调了半天，大致这个样，图片所在块的上边距有空再调成动态的。应该是图片比较大就不要上边距，比较小就图片垂直居中的效果会合理点。

js加了初始获取图片集合部分、左右控制按钮点击事件、小图点击事件里加了获取索引显示数量部分。

控制左右按钮的disabled状态部分本来是耦合在控制按钮点击里的。想想初始化时也需要控制，就抽出来了。

调开发者工具时，可视区被压缩，出现了纵向滚动条，但遮罩层只挡住了上半部分，所以在遮罩层出现时禁用了body的纵向滚动条。

这样基本可用了，下次想到新玩法再调整。代码直接留下。

<!DOCTYPE HTML><html><head><title>遮罩层大图</title><meta charset="UTF-8"><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){imglist=[];totalpic=0;curpic=0;$(".piclist").each(function(){imglist[totalpic]=$(this).attr("src");totalpic++;});//小图点击事件$(".piclist").on("click",function(){curpic=$(".piclist").index(this);showControl(curpic);$(".cur_big_pic_num").html(curpic+1);$(".total_big_pic_num").html(totalpic);$(".cur_big_pic").attr("src",$(this).attr("src"));$(".top_level").show();$("body").attr("style","overflow-y:hidden;");//加这个是去掉最外层的滚动条，防止滚到遮罩层挡不住的部分});//关闭遮罩层$(".close_top").on("click",function(){$(".top_level").hide();$("body").attr("style","overflow-y:none;");//关闭时恢复页面的纵向滚动条});});//大图左右切换function changeBigPic(index){var nowindex=curpic;var newnum=nowindex+index;if(newnum<0||newnum>totalpic-1)return;$(".cur_big_pic").attr("src",imglist[newnum]);curpic=newnum;showControl(curpic);$(".cur_big_pic_num").html(curpic+1);}//左右按钮的显示function showControl(index){if(index==0){$(".left_control").addClass("disabled");}else{$(".left_control").removeClass("disabled");}if(index==totalpic-1){$(".right_control").addClass("disabled");}else{$(".right_control").removeClass("disabled");}}</script><style>/*小图start*/ul{list-style: none;}ul li{padding:5px;float:left;}.piclist{width:200px;height:300px;cursor:pointer;}/*小图end*//*大图start*/.top_level{display:none;position:absolute;top:0;left:0;height:100%;width:100%;}.opacity_level{top:0;left:0;position:absolute;height:100%;width:100%;filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; background:#111111;}.big-content{height:100%;width:100%;position: absolute;top:0;text-align: center;}.cur_pic{margin-top:3%;height:90%;overflow-y:auto;overflow-x:hidden;display:inline-block;}.control{top:50%;position:absolute;padding:20px 25px;background:#cccccc;color:#ffffff;cursor: pointer;filter:alpha(opacity=70); -moz-border-radius: 22px;      /* Gecko browsers */    -webkit-border-radius: 22px;   /* Webkit browsers */    border-radius:29px;    font-weight: bolder;    font-size: 18px;}.control:HOVER{background:#B5143E;}.control.disabled{background:#6A6466;cursor:default;}.left_control{left:20px;}.right_control{right:20px;}.cur_text{width:100%;text-align: center;color:#ffffff;font-size:18px;position:absolute;filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; background:#111111;z-index:50;bottom: 0;}.close_top{z-index:100;cursor:pointer;position:absolute;top:40px;right:10%;padding:15px 25px;background:#cccccc;color:#ff0000;-moz-border-radius: 22px;      /* Gecko browsers */    -webkit-border-radius: 22px;   /* Webkit browsers */    border-radius:29px;    font-weight: bolder;    font-size: 18px;}/*大图end*/</style></head><body><div><ul><li><img class="piclist" src="images/pic1.jpg"/></li><li><img class="piclist" src="images/pic2.jpg"/></li><li><img class="piclist" src="images/pic3.jpg"/></li><li><img class="piclist" src="images/pic4.png"/></li></ul></div><div class="top_level"><div class="opacity_level"></div><div class="close_top">X</div><div class="big-content"><div onclick="changeBigPic(-1)" class="control left_control"><</div><div class="cur_pic"><img class="cur_big_pic"></div><div onclick="changeBigPic(1)" class="control right_control">></div><div class="cur_text"><span class="cur_big_pic_num">5</span>/<span class="total_big_pic_num">10</span></div></div></div></body></html>

0 0