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

最新推荐文章于 2023-03-31 10:41:53 发布
最新推荐文章于 2023-03-31 10:41:53 发布
阅读量770 收藏
点赞数
分类专栏： js 文章标签： jquery javascript 图片 响应式 图片切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z20905547/article/details/51007176
版权

调整目标：1.变更大图时，根据新图片宽高设置边距，保证图片能居中。

2.小伙伴表示下拉条太丑了，所以修改下大图交互方式，去掉下拉条，改为图片可拖拽。

3.样式随便搞搞。

首先，先把布局变下。

修改css，把图片外层的div改为绝对定位，调整样式保证可视区域范围。

.cur_pic{
	top: 0;
    left: 10%;
    height: 100%;
    width: 80%;
    overflow: hidden;
    display: inline-block;
    position: absolute;
	text-align:left;
}


其次修改js，在刚打开遮罩层以及切换图片时判断图片宽高和可视区域的宽高。决定图片的外边距。

//图片高度不够时设置上边距
		var moreHeight=$(".cur_pic").height()-$(".cur_big_pic").height();
		if(moreHeight>0){
			$(".cur_big_pic").css("margin-top",moreHeight/2+"px");
		}else{
			$(".cur_big_pic").css("margin-top","0px");
		}
		//图片宽度不够设置左边距
		var moreWidth=$(".cur_pic").width()-$(".cur_big_pic").width();
		if(moreWidth>0){
			$(".cur_big_pic").css("margin-left",moreWidth/2+"px");
		}else{
			$(".cur_big_pic").css("margin-left","0px");
		}


这样大图加载时基本就居中了，大图就顶边。

然后开搞图片拖拽

修改css，让鼠标在图片范围内变化，改js加鼠标动作的响应。

js调了蛮多时间的，css就不单独贴了，后面一起贴

pagex=0;
	pagey=0;
	begin=false;
	//拖动大图
	$(".cur_big_pic").bind("mousedown",function(e){
		e.preventDefault();
        e.stopPropagation();
		//记录坐标，改变鼠标
		$(this).css("cursor","-webkit-grabbing");
		parentX=parseInt($(this).css("margin-left"));
		parentY=parseInt($(this).css("margin-top"));
		pagex=e.pageX;
		pagey=e.pageY;
		begin=true;
	}).bind("mousemove",function(e){
		//变更位置
		if(begin){
			$(this).css("margin-left",parentX+e.pageX-pagex+"px");
			$(this).css("margin-top",parentY+e.pageY-pagey+"px");
		}
		
	}).bind("mouseup",function(e){
		//决定最终位置
		if(begin){
			$(this).css("cursor","-webkit-grab");
			$(this).css("margin-left",parentX+e.pageX-pagex+"px");
			$(this).css("margin-top",parentY+e.pageY-pagey+"px");
			begin=false;
		}
	}).bind("mouseout",function(e){
		//决定最终位置
		if(begin){
			$(this).css("cursor","-webkit-grab");
			$(this).css("margin-left",parentX+e.pageX-pagex+"px");
			$(this).css("margin-top",parentY+e.pageY-pagey+"px");
			begin=false;
		}
		
	});

本来是用offsetX/Y来取距离，但是这个取不到margin，不想调了，直接用margin来做了。

事件触发都是异步的，加个锁更好控制点。

贴上全部代码

<!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="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	imglist=[];
	totalpic=0;
	curpic=0;
	pointcurX=0;
	pointcurY=0;
	parentX=0;
	parentY=0;
	$(".piclist").each(function(){
		imglist[totalpic]=$(this).attr("src");
		totalpic++;
	});
	//小图点击事件
	$(".piclist").bind("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"));
		$(".high_level").attr("style","top:"+getScrollTop()+"px");//触发遮罩层显示时，获取当前的高度
		$(".high_level").show();
		//添加高斯模糊
		$(".maincontent").addClass("gaublue");
		//图片高度不够时设置上边距
		var moreHeight=$(".cur_pic").height()-$(".cur_big_pic").height();
		if(moreHeight>0){
			$(".cur_big_pic").css("margin-top",moreHeight/2+"px");
		}else{
			$(".cur_big_pic").css("margin-top","0px");
		}
		//图片宽度不够设置左边距
		var moreWidth=$(".cur_pic").width()-$(".cur_big_pic").width();
		if(moreWidth>0){
			$(".cur_big_pic").css("margin-left",moreWidth/2+"px");
		}else{
			$(".cur_big_pic").css("margin-left","0px");
		}
		$("body").attr("style","overflow-y:hidden;");//加这个是去掉最外层的滚动条，防止滚到遮罩层挡不住的部分
		$("body").bind("touchmove",function(event){event.preventDefault();});//手机端，出遮罩层就禁止滚动内容
	});
	//关闭遮罩层
	$(".close_ico").bind("click",function(){
		$(".high_level").hide();
		$(".maincontent").removeClass("gaublue");
		$("body").attr("style","overflow-y:none;");//关闭时恢复页面的纵向滚动条
		$("body").unbind("touchmove");//解除对默认行为的阻止
		
	});
	
	//手机滑动
	$(".big-content").bind("touchstart",function(e){
		pointcurX=e.targetTouches[0].pageX;
		
	});
	$(".big-content").bind("touchmove",function(e){
		
		
	});
	$(".big-content").bind("touchend",function(e){
		if(e.changedTouches[0].pageX>pointcurX){//向左
			changeBigPic(-1);
		}else{//向右
			changeBigPic(1);
		}
	});
	pagex=0;
	pagey=0;
	begin=false;
	//拖动大图
	$(".cur_big_pic").bind("mousedown",function(e){
		e.preventDefault();
        e.stopPropagation();
		//记录坐标，改变鼠标
		$(this).css("cursor","-webkit-grabbing");
		parentX=parseInt($(this).css("margin-left"));
		parentY=parseInt($(this).css("margin-top"));
		
		pagex=e.pageX;
		pagey=e.pageY;
		begin=true;
	}).bind("mousemove",function(e){
		//变更位置
		if(begin){
			$(this).css("margin-left",parentX+e.pageX-pagex+"px");
			$(this).css("margin-top",parentY+e.pageY-pagey+"px");
		}
		
	}).bind("mouseup",function(e){
		//决定最终位置
		if(begin){
			$(this).css("cursor","-webkit-grab");
			$(this).css("margin-left",parentX+e.pageX-pagex+"px");
			$(this).css("margin-top",parentY+e.pageY-pagey+"px");
			begin=false;
		}
	}).bind("mouseout",function(e){
		//决定最终位置
		if(begin){
			$(this).css("cursor","-webkit-grab");
			$(this).css("margin-left",parentX+e.pageX-pagex+"px");
			$(this).css("margin-top",parentY+e.pageY-pagey+"px");
			begin=false;
		}
		
	});
});
//大图左右切换
function changeBigPic(index){
	
	var nowindex=curpic;
	var newnum=nowindex+index;
	if(newnum<0||newnum>totalpic-1)return;
	$(".cur_big_pic").fadeOut(500,function(){
		$(".cur_big_pic").attr("src",imglist[newnum]);
		//图片高度不够时设置上边距
		var moreHeight=$(".cur_pic").height()-$(".cur_big_pic").height();
		if(moreHeight>0){
			$(".cur_big_pic").css("margin-top",moreHeight/2+"px");
		}else{
			$(".cur_big_pic").css("margin-top","0px");
		}
		var moreWidth=$(".cur_pic").width()-$(".cur_big_pic").width();
		if(moreWidth>0){
			$(".cur_big_pic").css("margin-left",moreWidth/2+"px");
		}else{
			$(".cur_big_pic").css("margin-left","0px");
		}
		curpic=newnum;
		showControl(curpic);
		$(".cur_big_pic_num").html(curpic+1);
		$(".cur_big_pic").fadeIn(1000);//入场
	});//出场
	
}
//左右按钮的显示
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*/
.gaublue{
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
.high_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{
	top: 0;
    left: 10%;
    height: 100%;
    width: 80%;
    overflow: hidden;
    display: inline-block;
    position: absolute;
	text-align:left;
}
.cur_big_pic{
	cursor: -webkit-grab;
}
.control{
	top:50%;
	position:absolute;
	padding:20px 25px;
	background: #CC1616;
	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_ico{
	z-index:100;
	cursor:pointer;
	position:absolute;
	top:40px;
	right:10%;
	padding: 15px 22px;
    background: #CC1616;
    color: #FFFFFF;
	-moz-border-radius: 22px;      /* Gecko browsers */
    -webkit-border-radius: 22px;   /* Webkit browsers */
    border-radius:29px;
    font-weight: bolder;
    font-size: 18px;
}
.close_ico:HOVER{
	background:#B5143E;
}
@media screen and (max-width:768px){
	.control{
		display:none;
	}
	.cur_pic{
		left: 0;
		width: 100%;
	}
	.cur_big_pic{
		width:100%;
	}
}
/*大图end*/
</style>
</head>
<body>
	<div class="maincontent">
		<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="high_level">
		<div class="opacity_level"></div>
		<div class="close_ico">X</div>
		<div class="big-content">
			
			<div οnclick="changeBigPic(-1)" class="control left_control"><</div>
			
			<div class="cur_pic">
					<img class="cur_big_pic">
			</div>

			<div οnclick="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>


另外随便调了下效果，顺手丢到刚买的vps上去了,效果差不多了，先不整了，以后有想法再调。

http://www.game-player.cn/showbigpic.html

突然想做个软键盘，输入密码的就好，画草稿去。

九流裱糊匠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击图片出现放大遮罩层
05-06
单击图片可以把图片放大 遮罩层的效果 很漂亮哦 纯js的代码
div+js 弹出层
ZXL工作室
08-10 1475
jQuery弹出层效果 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opa
点击按钮弹出遮罩层背景和居于屏幕中间的弹出窗口（结合阿聪世家适当修改）
baidu_26764911的专栏
04-12 2216
遮罩层效果 兼容ie firefox jQuery遮罩层                     .mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha
javaScript实现遮罩层效果：点击登录按钮，弹出登录框，此时页面的其他部分无法点击，关闭登录框，页面才可以点击
小福气的博客
07-07 1232
<style> *{ margin:0px; padding:0px; } body,html{ width:100%; height:100%; } .div1{ text-align:center; } button{ ...
JavaScript点击弹出遮罩层
weixin_44561520的博客
01-20 1563
JavaScript点击弹出遮罩层 开发工具与关键技术：DW与JS 作者：戴怡斌 18级 撰写时间：2019年1月18日 下面我们使用JavaScript控制遮罩层部分，接下来来看一个例子，当我点击图1里的绿色小球弹出一个提示框，见图1 看到截图里的这个提示框说明我们可以继续往下敲，点击确定之后弹出遮罩层，我们看截图js代码部分 在这里面还用到css3部分，通过trans...
Python实战-从菜鸟到大牛的进阶之路
07-22
资源名称：Python 实战-从菜鸟到大牛的进阶之路资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
简单精美js弹出层效果
07-16
js弹出层效果，简单精美js弹出层效果—菜鸟的福音
菜鸟电子面单接口+js云打印+C#云打印.zip
11-24
菜鸟电子面单，c#对接源码 1.审核通过后可以进行测试 2.首先调用电子面单订购查询接口，查询商家发货地址，及面单信息 3.调用取号接口，进行电子面单取号。 4.根据取号结果调用本地打印机，进行打印。
asp.net静态方法弹出对话框实现思路
01-01
为菜鸟所准备……其实就是弹出JavaScript小窗口,总得来说就是定义的一个DIV 代码如下: /// <summary> /// 弹出JavaScript小窗口,其实就是定义的一个DIV /// </summary> /// ”js”>窗口信息</param> public static ...
菜鸟打印控件
12-23
CaiNiaoPrint(菜鸟打印组件)是一款非常实用的打印辅助软件；它主要是专门用来针对淘宝卖家的辅助根据；集合了丰富的面板模块，并且是电子的，软件可以自动的更新，快速的帮助用户出单，这样就不需要传统的手写快递单...
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮
06-04
点击按钮弹出悬浮层，层上有数据且可以关闭 页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。
js点击按钮实现带遮罩层的弹出视频效果
10-23
主要介绍了js点击按钮实现带遮罩层的弹出视频效果,需要的朋友可以参考下
js图片遮罩效果实现
11-19
js 图片遮罩，可以用于图片局部放大效果
vue手写遮罩层弹窗，实现点击遮罩层和关闭按钮关闭弹窗
weixin_45121510的博客
11-26 5974
父组件 <template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /
【实习】弹出窗口+遮罩层
qq_45999531的博客
01-18 612
【思路】点击按钮弹出窗口（窗口内容随意），绑定点击事件（<script>）在按钮button上 【实现遮罩层+弹出窗口】弹出的窗口也是html文件，需要css更改样式，重点在于 display：none/*待弹出的窗口设置成看不见的状态*/ display：block/*触发点击事件后窗口出现*/ <div id="mask" style="display: none;">&lt...
关于点击显示遮罩层弹窗
weixin_55975880的博客
03-31 186
采用固定定位将遮罩层定位在整个屏幕中，这样即使向下滑动遮罩层也存在。内部的弹窗也可以使用固定定位。
小程序弹出半角遮罩层
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-06 1256
小程序弹出半角遮罩层
jQuery点击图片弹出大图遮罩层
u011927449的博客
07-05 439
使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验：http://hovertree.com/texiao/hovertreeshow/在开发HoverTreeTop项目的产品展示功能过程中，因为要把产品图片的大图显示给用户看，就使用jQuery制作了一个插件：HoverTreeShow ，使用该插件可以很方便的弹出图片的大图，已经运用在项目中了，除了上面链接的示例外，HoverTreeTop项目的产品展示也是一个实例，请访问链接：http://hovertree.com/top/ht
jquery 点击图片弹出遮罩层查看大图
weixin_30922589的博客
11-24 444
<div class="photobox"> <ul> <li data-date="'+data[i].id+'"> <div class="imgbox"> <img src="..."/> </div> </li> <l...
js事情绑定 鼠标悬浮出现遮罩层，鼠标离开遮罩层收起
最新发布
07-12
如果你想使用JavaScript来实现鼠标悬浮出现遮罩层，鼠标离开遮罩层收起的效果，可以使用事件绑定和样式操作来实现。以下是一种实现方法： HTML部分： ```html 图片"> <div class="overlay"></div> ``` CSS部分...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值