【JavaScript】（9）——实例：滑动效果的弹出框

最新推荐文章于 2024-05-03 22:01:01 发布

Reka

最新推荐文章于 2024-05-03 22:01:01 发布

阅读量2.4k

点赞数

分类专栏：我的成长路の计算机 ----------【Web前端】 JavaScript 文章标签： javascript 经验

本文链接：https://blog.csdn.net/helijie92902/article/details/50993641

版权

本文分享了一种使用JavaScript实现带有滑动效果的弹出框的方法。在满足用户界面需求的过程中，作者通过搜索和实践，成功制作出该效果，并提供了代码示例。文章包含HTML和JS代码片段，以及手机端效果的查看建议和适配问题的重要性。

摘要由CSDN通过智能技术生成

背景：用户的需求千奇百怪，为了满足用户对界面的需求，我这只小菜鸟也是“拼了小命”了。弹出框，大家都很熟悉吧，但是在弹出框中加上滑动效果，这个就是有点小难了，为了这个效果我也是搜寻了很多地方呀，最后的最后终于将这个效果做出来了，而且还不错，现在分享一下，更多的怕自己忘记。

一、材料加载

材料：

按钮图片两张（一张用来点击后弹出弹出框，一张用来关闭弹出框），其他图片内容可以自己加载，Notepad++

代码：

Html：

<body id="body" style="margin: 0 0 0 0; background-color:#ffffff;">
<!-- 界面上的按钮 -->
<img  id="img1"  style="position:absolute;float:left;" οnclick="divShow()"; src="img/button.jpg "> 

<!-- 弹出蒙版 -->
<div id="masking1" class="masking1" style = "display:none;position:absolute;z-index:4;margin-top:0px;background-color:#3c3a39;opacity:0.9;bottom:30px;"> 
</div>

<!-- 弹出框 -->
 <div id="tanchu" style="display:none;position:absolute;z-index:5;">
 
<!-- 弹出框1 -->
	<div id="tanchu1" class="tanchu1" align="left" style="border-bottom:400px,400px;border-bottom-color:#ff0000;display:none;width:100%;;background-image:url(img/backgroundimg.jpg);z-index:5;position:absolute;">
	 
	 <!-- 固定范围 -->
		<div id="fuwufanwei" align="left" style="position:absolute;margin-top:0;z-index:8;">
			<img  id="xingxing1"  style="position:absolute;float:left;z-index:8;" src="img/icon star service@2x.png">
			<div id ="fuwuwenzi" class="font32" align="left" style="z-index:8;color:#cb9a61;font-family:PingFangSC-Medium, sans-serif;">
			固定范围
			</div>
			
			<img id="timutupian1"  style="position:absolute;" src="img/timutupian.jpg ">
		
			<!-- 关闭按钮 -->
			<div id="guanbi" style="float:right;">
				<img  id="guanbitupian"  style="position:absolute;" οnclick="divNone()" src="img/iocn  close 1@2xguanbi.png ">
				
			</div>
		</div>	 
	</div>		 
				 	 							
<!-- 弹出框2 -->
	<div id="tanchu2" class="tanchu1" align="left" style="display:none;width:100%;background-image:url(img/backgroundimg.jpg);z-index:5;position:absolute; top:0px; left:0;overflow-y:auto;bottom:30px;">
	
	<!-- 滑动范围 -->
	&