背景:用户的需求千奇百怪,为了满足用户对界面的需求,我这只小菜鸟也是“拼了小命”了。弹出框,大家都很熟悉吧,但是在弹出框中加上滑动效果,这个就是有点小难了,为了这个效果我也是搜寻了很多地方呀,最后的最后终于将这个效果做出来了,而且还不错,现在分享一下,更多的怕自己忘记。
一、材料加载
材料:
按钮图片两张(一张用来点击后弹出弹出框,一张用来关闭弹出框),其他图片内容可以自己加载,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;">
<!-- 滑动范围 -->
&