使用原生js实现页面蒙灰(mask)效果示例代码

来源:脚本之家  责任编辑:小易  

说说我的经验,我家老大在我家呆的第一个夏天,我还是一个人住。每天淋浴的时候它都在外面鬼叫扒门,跟我10秒钟后就会淹死那样惊恐,所以我后来洗澡就不关门了。第一次打开门的时候,它看到站在水里的我,一脸:”你居然让水冲你,你一定活不长了!“的表情。然后它就进了浴室,一开始站在离水流很远的浴室凳上,类似这样:“我对你的自杀倾向具有十分的学术兴趣。”后来它会尝试撩一下靠近它脚边的水花什么的:过几天它发现没什么危险,就挪到淋浴对面,那时候我浴室下水不太好,地上总有两三厘米积水,它就在水里农民揣:(类似这样,不过手是揣着的,1/5身体全部浸在水里)看着我的裸体津津有味地揣了一整个夏天。冬天的时候,家里住进了

对于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中才可以

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:

2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:

3、添加“onmouseout”js事件,首先获取图片标签,然后定义鼠标移开图片时发生的事件,这时图片将会缩小:

求助cocos2d-JS实现滑动条的代码

Cocos2d-x3.0

//a static method

Sprite* HelloWorld::maskedSpriteWithSprite(Sprite* textureSprite, Sprite* maskSprite)

{

// 1

RenderTexture * rt = RenderTexture::create( maskSprite->getContentSize().width,

maskSprite->getContentSize().height );

// 2

maskSprite->setPosition(maskSprite->getContentSize().width/2,

maskSprite->getContentSize().height/2);

textureSprite->setPosition(textureSprite->getContentSize().width/2,

textureSprite->getContentSize().height/2);

// 3

maskSprite->setBlendFunc( BlendFunc{GL_ONE, GL_ZERO} );

textureSprite->setBlendFunc( BlendFunc{GL_DST_ALPHA, GL_ZERO} );

// 4

rt->begin();

maskSprite->visit();

textureSprite->visit();

rt->end();

// 5

Sprite *retval = Sprite::createWithTexture(rt->getSprite()->getTexture());

retval->setFlippedY(true);

return retval;

}

..

  • 本文相关:
  • react-router v4 路由配置方法小结
  • javascript对象属性操作实例解析
  • onclick和onblur冲突问题的快速解决方法
  • ajax高级笔记 javascript高级程序设计笔记
  • cookie 最近浏览记录(中文escape转码)具体实现
  • javascript中的web worker多线程api研究
  • apply an autoformat to an excel spreadsheet
  • 微信小程序导入vant报错vm292:1 thirdscripterror的解决方法
  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能
  • 微信小程序实现随机验证码功能
  • 在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)
  • 求助cocos2d-JS实现滑动条的代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved