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

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

一、材料加载

材料：

按钮图片两张（一张用来点击后弹出弹出框，一张用来关闭弹出框），其他图片内容可以自己加载，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;"><!-- 滑动范围 --><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手机上显示正常，也许在苹果手机上界面就乱了，所以，一定要做适配。

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

uni-app的灰朦层取消滑动以及官方弹出框设计代码
html代码 <button type="primary" @click="discount">点击事件</button><vie ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
html弹出框教程,JavaScript 弹出框
JavaScript 弹出框在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框警告框是最简单的弹 ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...
Axure RP实例教程：组合弹出菜单效果
Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交互保真度的全方位构建,是目前业界首屈一指的交互式产品原 ...
bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
JavaScript弹出框、对话框、提示框、弹窗总结
JavaScript弹出框.对话框.提示框.弹窗总结. 1.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 =================== ...
php和jquery ui弹出框,JavaScript_jQuery弹出框代码封装DialogHelper，看了jQueryUI Dialog的例子，效果 - phpStudy...
jQuery弹出框代码封装DialogHelper 看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的Dialog ...

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

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

最新文章

热门文章