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

来源：互联网发布：怎么关闭淘宝客推广编辑：程序博客网时间：2024/04/28 18:16

调整目标：1.增加响应式布局，适应移动端显示。

2.添加手机滑动切换图片。

首先修改css，主要就是加一段响应式样式，控制在小屏幕时左右按钮隐藏，图片宽度设为100%

@media screen and (max-width:768px){.control{display:none;}.cur_big_pic{width:100%;}}

接下来手机滑动的几个事件监听

加在图片外层容器元素上。第一次加在了最大遮罩层上，导致关闭图层的事件无法触发了。

在滑动结束时，判断下左右再调用切换图片的方法就行。

//手机滑动document.getElementById("big-content").addEventListener("touchstart",function(e){pointcurX=e.targetTouches[0].pageX;});document.getElementById("big-content").addEventListener("touchmove",function(e){});document.getElementById("big-content").addEventListener("touchend",function(e){if(e.changedTouches[0].pageX>pointcurX){//向左changeBigPic(-1);}else{//向右changeBigPic(1);}});

接着就开始调试出现的几个问题

1.pc端这几张图片不会超出可视区域，没有滚动条，到手机端图片都纵向排列了，内容区域超出可视区域太多，原来遮罩层top=0就的代码就不合适了。

改为获取滚动条距离顶端高度赋值给遮罩层

2.pc端设置body纵向溢出隐藏，就可以去除滚动条，在手机端就没蛋用了。

得禁止掉body的滑动导致内容区的滚动条

//小图点击事件$(".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").attr("style","top:"+getScrollTop()+"px");//触发遮罩层显示时，获取当前的高度$(".top_level").show();$("body").attr("style","overflow-y:hidden;");//加这个是去掉最外层的滚动条，防止滚到遮罩层挡不住的部分$("body").bind("touchmove",function(event){event.preventDefault();});//手机端，出遮罩层就禁止滚动内容});//关闭遮罩层$(".close_top").on("click",function(){$(".top_level").hide();$("body").attr("style","overflow-y:none;");//关闭时恢复页面的纵向滚动条$("body").unbind("touchmove");//解除对默认行为的阻止});

大概这样就好了

调手机端事件时走了蛮多弯路，不熟悉移动端吃亏。

还遗留了问题：手机横屏时，图片随着宽度拉伸整体比例变大，高度超出屏幕太多，但没有出滚动条，导致图片只显示了上面一段。

先这样了，下次有空再弄。最近想去玩玩hadoop

贴上全部代码

<!DOCTYPE HTML><html><head><title>遮罩层大图</title><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"><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;pointcurX=0;pointcurY=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").attr("style","top:"+getScrollTop()+"px");//触发遮罩层显示时，获取当前的高度$(".top_level").show();$("body").attr("style","overflow-y:hidden;");//加这个是去掉最外层的滚动条，防止滚到遮罩层挡不住的部分$("body").bind("touchmove",function(event){event.preventDefault();});//手机端，出遮罩层就禁止滚动内容});//关闭遮罩层$(".close_top").on("click",function(){$(".top_level").hide();$("body").attr("style","overflow-y:none;");//关闭时恢复页面的纵向滚动条$("body").unbind("touchmove");//解除对默认行为的阻止});//手机滑动document.getElementById("big-content").addEventListener("touchstart",function(e){pointcurX=e.targetTouches[0].pageX;});document.getElementById("big-content").addEventListener("touchmove",function(e){});document.getElementById("big-content").addEventListener("touchend",function(e){if(e.changedTouches[0].pageX>pointcurX){//向左changeBigPic(-1);}else{//向右changeBigPic(1);}});});//大图左右切换function changeBigPic(index){var nowindex=curpic;var newnum=nowindex+index;if(newnum<0||newnum>totalpic-1)return;$(".cur_big_pic").attr("src",imglist[newnum]);$(".cur_big_pic")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");}}//获取滚动条距离顶部位置function getScrollTop() {          var scrollPos;          if (window.pageYOffset) {          scrollPos = window.pageYOffset; }          else if (document.compatMode && document.compatMode != 'BackCompat')          { scrollPos = document.documentElement.scrollTop; }          else if (document.body) { scrollPos = document.body.scrollTop; }           return scrollPos;   } </script><style>body{height:1000px;}/*小图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:2%;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;}@media screen and (max-width:768px){.control{display:none;}.cur_big_pic{width:100%;}}/*大图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><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><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><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><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><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><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><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 id="big-content" 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