使用原生js实现页面蒙灰(mask)效果示例代码
2023-06-13 09:15:28 时间
对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序时间较长,那么用户在网页的等待时间会较长,但是如果页面上没有一个比较友好的提示方式
(增加蒙灰效果),那么用户体验会不是特别良好,用户不知道现在是不是应该点击别的程序,用户并不知道是不是应该继续等待网页,还是可以点击别的页面。
现在就有一个比较良好的交互,就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,当然jquery也提供了这种蒙灰方法。在此作者希望自己也能够
使用原生的js实现自己的蒙灰效果。故自己做了尝试。实现了蒙灰效果。在此我只关注实现,页面美观程度我没有太多调整,所以页面不太美观。在此贴出实现代码。
在CODE上查看代码片派生到我的代码片
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> <HTML> <HEAD> <TITLE>NewDocument</TITLE> <METANAME="Generator"CONTENT="EditPlus"> <METANAME="Author"CONTENT=""> <METANAME="Keywords"CONTENT=""> <METANAME="Description"CONTENT=""> <styletype="text/css"> .maskStyle{ background-color:#B8B8B8; z-index:1; filter:alpha(opacity=50); opacity:0.8; position:absolute; text-align:center; color:blue; font:bold1em"宋体",Arial,Times; height:25px; font-weight:bold; overflow:hidden; } </style> </HEAD> <scripttype="text/javascript"> functioncreatMaskLayer(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; returndivItem; } functionsetMask(){ vareffectItem=document.getElementById("test"); varexistMaskItem=findMaskItem(effectItem); if(existMaskItem){ return; } varshowText="加载中..."; effectItem.appendChild(creatMaskLayer(effectItem,showText)); } functionremoveMask(){ vareffectItem=document.getElementById("test"); varmaskItem=findMaskItem(effectItem); if(maskItem){ effectItem.removeChild(maskItem); } } functionfindMaskItem(item){ varchildren=item.children; for(vari=0;i<children.length;i++){ if("maskStyle"==(children[i].className)){ returnchildren[i]; } } } </script> <BODY> <inputtype="button"value="蒙灰"onclick="setMask()"/> <inputtype="button"value="取消蒙灰"onclick="removeMask()"/> <br> <divid="test"style="border:1pxsolid;width:300px;height:300px"> 蒙灰我吧 <inputtype="button"value="测试是否还能点击"onclick="alert("OK!")"/> </div> </BODY> </HTML>
解释一下代码中比较重要的地方。
.maskStyle是蒙灰层的样式
其中
在CODE上查看代码片派生到我的代码片
filter:alpha(opacity=50); opacity:0.8;
是代表蒙灰层透明度,filter属性是为了兼容IE8浏览器
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
PS:蒙灰效果需要把要蒙灰到element放到div中才可以
相关文章
- 200行Html5+CSS3+JS代码实现动态圣诞树
- wow~ 让网站动起来的动画库,真漂亮,再也不用写复杂的动画代码了~wow.js
- JS实现拖拽代码详解编程语言
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- 用js实现的DIV+CSS编辑器代码
- 用js实现键盘方向键翻页功能的代码
- 一些常用的JS功能函数代码
- 让链接必须按先后顺序点击的JS代码
- JS实现完美include载入实现代码
- js与jquery中获取当前鼠标的x、y坐标位置的代码
- js字符串转化成数字的代码
- html中table数据排序的js代码
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- jquery延迟加载外部js实现代码
- 一个封装js代码-----展开收起效果示例
- JS操作数据库的实例代码
- js动态添加事件并可传参数示例代码
- js全屏显示显示代码的三种方法
- 利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
- js改变文章字体大小的实例代码
- 浏览器图片选择预览、旋转、批量上传的JS代码实现
- js上下左右键控制焦点(示例代码)
- js购物车实现思路及代码(个人感觉不错)
- js形成页面的一种遮罩效果实例代码
- js导出txt示例代码
- js日期比较相关天数代码
- Js保留小数点的4种效果实现代码分享
- js实现ArrayList功能附实例代码
- js实现键盘操作实现div的移动或改变的原理及代码