对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序时间较长,那么用户在网页的等待时间会较长,但是如果页面上没有一个比较友好的提示方式
(增加蒙灰效果),那么用户体验会不是特别良好,用户不知道现在是不是应该点击别的程序,用户并不知道是不是应该继续等待网页,还是可以点击别的页面。
现在就有一个比较良好的交互,就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,当然jquery也提供了这种蒙灰方法。在此作者希望自己也能够
使用原生的js实现自己的蒙灰效果。故自己做了尝试。实现了蒙灰效果。在此我只关注实现,页面美观程度我没有太多调整,所以页面不太美观。在此贴出实现代码。
在CODE上查看代码片派生到我的代码片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> .maskStyle { background-color:#B8B8B8; z-index:1; filter:alpha(opacity=50); opacity:0.8; position:absolute; text-align:center; color:blue; font:bold 1em "宋体",Arial,Times; height:25px; font-weight:bold; overflow:hidden; } </style> </HEAD> <script type="text/javascript"> function creatMaskLayer(effectItem,showText) { divItem = document.createElement("div"); divItem.className="maskStyle"; divItem.style.lineHeight=effectItem.offsetHeight+"px"; divItem.innerText=showText; divItem.style.width=effectItem.offsetWidth; divItem.style.height=effectItem.offsetHeight; divItem.style.top=effectItem.offsetTop; divItem.style.left=effectItem.offsetLeft; return divItem; } function setMask() { var effectItem = document.getElementById("test"); var existMaskItem = findMaskItem(effectItem); if(existMaskItem) { return; } var showText = "加载中..."; effectItem.appendChild(creatMaskLayer(effectItem,showText)); } function removeMask() { var effectItem = document.getElementById("test"); var maskItem = findMaskItem(effectItem); if(maskItem) { effectItem.removeChild(maskItem); } } function findMaskItem(item) { var children = item.children; for(var i=0;i<children.length;i++) { if("maskStyle"==(children[i].className)) { return children[i]; } } } </script> <BODY> <input type="button" value="蒙灰" onclick="setMask()"/> <input type="button" value="取消蒙灰" onclick="removeMask()"/> <br> <div id="test" style="border:1px solid;width:300px;height:300px"> 蒙灰我吧 <input type="button" value="测试是否还能点击" onclick="alert('OK!')"/> </div> </BODY> </HTML>
解释一下代码中比较重要的地方。
.maskStyle是蒙灰层的样式
其中
在CODE上查看代码片派生到我的代码片
filter:alpha(opacity=50); opacity:0.8;
是代表蒙灰层透明度,filter属性是为了兼容IE8浏览器
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
PS:蒙灰效果需要把要蒙灰到element放到div中才可以
标签:
原生js,蒙灰
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“使用原生js实现页面蒙灰(mask)效果示例代码”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 梅艳芳.1994-是这样的(金碟版)【华星】【WAV+CUE】
- 张学友《真情流露》HQ+S纯银深度[低速原抓WAV+CUE]
- 江志丰2012-七天[豪记][WAV+CUE]
- 黑鸭子2003《聆听柔情HQCD》[日本版][WAV+CUE]
- 群星《奔赴!万人现场 第5期》[FLAC/分轨][587.07MB]
- 关大洲《国家宝藏 第四季原声音乐 关大洲作品》[320K/MP3][109.49MB]
- 关大洲《国家宝藏 第四季原声音乐 关大洲作品》[FLAC/分轨][527.23MB]
- LOL双城之战大乱斗什么时候更新 双城大乱斗上线更新时间介绍
- s14全球总决赛冠军皮肤有什么 2024T1冠军皮肤选择一览
- faker加里奥s14决赛什么出装 faker加里奥s14决赛出装介绍
- 《马里奥与路易吉RPG:兄弟齐航》Fami通34分:路易吉存在感拉满
- 数据挖掘者新发现:NS继任机型或支持4K分辨率
- 宫本茂谈任天堂未来:研发费用增加但注重创意与传承
- 陈小云.2000-餐厅综艺金榜【海丽唱片】【WAV+CUE】
- 卓文萱.2008-翻滚吧!蛋炒饭电视原声带【滚石】【FLAC分轨】