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

原创 于 2016-03-24 21:33:49 发布 · 762 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #图片 #大图 #响应式 #图片切换

本文介绍了一个基于HTML和JavaScript实现的图片展示系统优化过程，重点解决了响应式布局问题，包括适配不同屏幕尺寸、图片滑动切换及触摸事件监听等关键功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

调整目标：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>


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值