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

来源：互联网发布：国泰安天使投资数据库编辑：程序博客网时间：2024/05/16 05:48

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

一、材料加载

材料：

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

代码：

Html：

<body id="body" style="margin: 0 0 0 0; background-color:#ffffff;"><!-- 界面上的按钮 --><img  id="img1"  style="position:absolute;float:left;" onclick="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;" onclick="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;"><!-- 滑动范围 --><div id="fuwutese" align="left"><img  id="xingxing2"  style="position:absolute;float:left;" src="img/icon star service@2x.png"><div id="tesewenzi" class="font32" align="left"style="color:#cb9a61;font-family:PingFangSC-Medium, sans-serif;">滑动范围</div></div><div id="wenzi" align="center" style="position:absolute;">                <div class="wenzi1" align="center" >你说帘外海棠.锦屏鸳鸯.后来庭院春深.咫尺画堂. </div><div class="wenzi1" align="center" >你说笛声如诉.费尽思量.后来茶烟尚绿.人影茫茫. </div><div class="wenzi1" align="center" >你说可人如玉.与子偕臧.后来长亭远望.夜色微凉. </div><div class="wenzi1" align="center" >你说霞染天光.陌上花开与谁享.后来烟笼柳暗.湖心水动影无双. </div><div class="wenzi1" align="center" >你说彼岸灯火.心之所向.后来渔舟晚唱.烟雨彷徨.  </div><div class="wenzi1" align="center" >你说水静莲香.惠风和畅.后来云遮薄月.清露如霜. </div><div class="wenzi1" align="center" >你说幽窗棋罢.再吐衷肠.后来风卷孤松.雾漫山冈.  </div><div class="wenzi1" align="center" >你说红袖佯嗔.秋波流转思张敞.后来黛眉长敛.春色飘零别阮郎. </div><div class="wenzi1" align="center" >你说暗香浮动.刹那光芒.后来玉殒琼碎.疏影横窗.  </div><div class="wenzi1" align="center" >你说良辰美景.乘兴独往.后来红尘紫陌.雪落太行.</div><div class="wenzi1" align="center" >你说赋尽高唐.三生石上.后来君居淄右.妾家河阳.  </div><div class="wenzi1" align="center" >你说玉楼朱颜.飞月流觞迎客棹.后来幽谷居士.枕琴听雨卧禅房. </div><div class="wenzi1" align="center" >你说高山流水.客答春江.后来章台游冶.系马垂杨.  </div><div class="wenzi1" align="center" >你说锦瑟韶光.华灯幢幢.后来荼靡开至.青苔满墙.  </div><div class="wenzi1" align="center" >你说天地玄黄.风月琳琅.后来月斜江上.云淡天长. </div><div class="wenzi1" align="center" >你说兰舟轻发.西楼月下忆姣娘.后来江湖两忘.只影天涯踏秋殇.   </div><div class="wenzi1" align="center" >你说幽谷听溪.寻芳清岗.后来落花丁零.水涸潇湘. </div><div class="wenzi1" align="center" >你说霜冷长河.蒹葭苍苍.后来伊人何在.孤坐未央.</div><div class="wenzi1" align="center" >你说月洒寒江.玉柱琼梁.后来冷镜残钩.三更榻凉. </div><div class="wenzi1" align="center" >你说梦呓故园.桃花水里游鸳鸯.后来千山暮雪.老翅几回自奔忙. </div><div class="wenzi1" align="center" >你说西石桥上.恋人入对出双.后来青丝一缕.痴情一世藏. </div><div class="wenzi1" align="center" >你说鸳鸯潭里.月影摇晃.后来梳妆镜前.泪拆两行. </div><div class="wenzi1" align="center" >你说鸳鸯戏水.嬉闹池塘.后来乌蓬摇梦.轻奏一曲离殇. </div><div class="wenzi1" align="center" >你说繁花堤上.挽手共赏春光.后来天涯相望.梨花雨又凉. </div><div class="wenzi1" align="center" >More…… </div></div></div></div></body>

二、样式规范

JS1：

<style>#tanchu{border-top-left-radius:5px;<span style="white-space:pre"></span>border-top-right-radius:5px;<!-- 弹出框圆角显示 -->}#tanchu1{border-top-left-radius:5px;        border-top-right-radius:5px;} </style>

JS2：

 (function () {            document.addEventListener('DOMContentLoaded', function () {                var html = document.documentElement;                var windowWidth = html.clientWidth;var windowHeight = html.clientHeight;document.getElementById("img1").style.height = 750/ 1334 * windowHeight + "px";document.getElementById("img1").style.width =750/ 750 * windowWidth + "px";document.getElementById("img1").style.marginTop = 245/ 1334 * windowHeight + "px";        document.getElementById("timutupian1").style.height = 300/ 750 * windowWidth + "px";document.getElementById("timutupian1").style.width =750/ 750 * windowWidth + "px";document.getElementById("masking1").style.height = 2000/ 1334 * windowHeight + "px";document.getElementById("masking1").style.width =750/ 750 * windowWidth+ "px";document.getElementById("tanchu").style.height=1334/1334 * windowHeight + "px";        document.getElementById("tanchu").style.width=750/750 * windowWidth  + "px";document.getElementById("tanchu").style.marginTop=130/1334 * windowHeight + "px";document.getElementById("tanchu1").style.width=750/750 * windowWidth  + "px";document.getElementById("tanchu1").style.height=332/1334 * windowHeight + "px";document.getElementById("fuwufanwei").style.width=750/750 * windowWidth  + "px";document.getElementById("fuwufanwei").style.height=80/1334 * windowHeight + "px";document.getElementById("fuwuwenzi").style.width=170/750 * windowWidth  + "px";document.getElementById("fuwuwenzi").style.height=35/1334 * windowHeight + "px";document.getElementById("fuwuwenzi").style.marginLeft=80/750 * windowWidth  + "px";document.getElementById("fuwuwenzi").style.marginTop=40/1334 * windowHeight + "px";document.getElementById("xingxing1").style.width=80/750 * windowWidth  + "px";document.getElementById("xingxing1").style.height=80/750 * windowWidth  + "px";document.getElementById("xingxing1").style.marginLeft=10/750 * windowWidth  + "px";document.getElementById("xingxing1").style.marginTop= 16/1334 * windowHeight + "px"; document.getElementById("guanbi").style.width=65/750 * windowWidth  + "px";document.getElementById("guanbi").style.height=65/750 * windowWidth  + "px";document.getElementById("guanbi").style.marginRight=20/750 * windowWidth  + "px";document.getElementById("guanbi").style.marginTop= -30/1334 * windowHeight + "px";document.getElementById("guanbitupian").style.width=60/750 * windowWidth  + "px";document.getElementById("guanbitupian").style.height=60/750 * windowWidth  + "px";document.getElementById("guanbitupian").style.marginRight=20/750 * windowWidth  + "px"document.getElementById("guanbitupian").style.marginTop= -25/1334 * windowHeight + "px";              document.getElementById("tanchu2").style.width=750/750 * windowWidth  + "px";document.getElementById("tanchu2").style.height=950/1334 * windowHeight + "px";document.getElementById("tanchu2").style.marginTop=332/1334 * windowHeight + "px"; document.getElementById("fuwutese").style.width=750/750 * windowWidth  + "px";document.getElementById("fuwutese").style.height=80/1334 * windowHeight + "px";document.getElementById("tesewenzi").style.width=170/750 * windowWidth  + "px";document.getElementById("tesewenzi").style.height=35/1334 * windowHeight + "px";document.getElementById("tesewenzi").style.marginLeft=80/750 * windowWidth  + "px";document.getElementById("tesewenzi").style.marginTop=40/1334 * windowHeight + "px";document.getElementById("xingxing2").style.width=80/750 * windowWidth  + "px";document.getElementById("xingxing2").style.height=80/750 * windowWidth  + "px";document.getElementById("xingxing2").style.marginLeft=10/750 * windowWidth  + "px";document.getElementById("xingxing2").style.marginTop= -25/1334 * windowHeight + "px";document.getElementById("wenzi").style.width=750/750 * windowWidth  + "px";document.getElementById("wenzi").style.height=1334/1334 * windowHeight + "px";document.getElementById("wenzi").style.marginLeft=0/750 * windowWidth  + "px";document.getElementById("wenzi").style.marginTop= -30/1334 * windowHeight + "px";var len = document.getElementsByClassName("wenzi1").length;for (i = 0; i < len; i++) {document.getElementsByClassName("wenzi1").item(i).style.fontSize = (33 * windowWidth / 750 ) + 'px';document.getElementsByClassName("wenzi1").item(i).style.marginTop = 20/1334 * windowHeight + "px";document.getElementsByClassName("wenzi1").item(i).style.height = 50/1334 * windowHeight + "px"; document.getElementsByClassName("wenzi1").item(i).style.width = 750/750 * windowWidth  + "px";}var len = document.getElementsByClassName("font32").length;for (i = 0; i < len; i++) {document.getElementsByClassName("font32").item(i).style.fontSize = (32 * windowWidth / 750 ) + 'px';}            }, false);        })();

三、方法事件

JS：

<!-- 弹出框显示 -->function divShow(){document.getElementById("masking1").style.display = "block";document.getElementById("tanchu").style.display = "block";document.getElementById("tanchu1").style.display = "block"; document.getElementById("tanchu2").style.display = "block";document.getElementById("body").style.height="100%";document.getElementById("body").style.overflow="hidden";   <!-- 禁用底部的滑动 -->}<!-- 弹出框消失 -->function divNone(){document.getElementById("masking1").style.display = "none";document.getElementById("tanchu").style.display = "none"; document.getElementById("tanchu1").style.display = "none";document.getElementById("tanchu2").style.display = "none";document.getElementById("body").style.overflow="auto";   <!-- 启用底部的滑动 -->

四、效果展示

由于上传的文件有大小的限制，这个效果图不是很明显，可以下载demo进行查看，这个是手机端的效果，在浏览器上也可展示（火狐：ctrl+shift+M；谷歌：F12），然后选择手机的型号和尺寸后F5刷新进行查看，不得不说这两款浏览器简直太强大了。

资源下载

五、学习心得

1、只有想不到，没有做不到。好的想法必须经过实践才能“化腐朽为神奇”。

2、移动端的开发，也存在适配的问题，在Android手机上显示正常，也许在苹果手机上界面就乱了，所以，一定要做适配。

0 0