css3遮罩——新功能引导层

看了张鑫旭的《腾讯微云黑色遮罩引导蒙版更好的CSS实现方式》和《CSS3下的圆形遮罩效果实现与应用》,终于搞明白了遮罩新功能引导层是如何实现的。

原文链接:http://www.zhangxinxu.com/wordpress/?p=5290      http://www.zhangxinxu.com/wordpress/?p=2118

要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素的四个border值设置的非常大,铺满整个屏幕,这样就实现了页面遮罩部分镂空的效果。

让遮罩层的的宽度和高度等于目标元素的宽度和高度,剩下的遮罩效果就是合理设置遮罩层四个border的值的大小,使遮罩层铺满整个屏幕。

css3遮罩——新功能引导层_第1张图片

我们想把引导效果做的更加好看一下,制作成椭圆的效果,需要用到css3的border-radius:50%;并且圈圈内带有模糊效果,如何实现?就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签,里面重新生成一个大尺寸伪元素,实现内层的高亮椭圆内边缘模糊效果,最终实现的效果如下如图所示:

css3遮罩——新功能引导层_第2张图片

由于我们的目标元素的宽度和高度是不固定的,我们可以设置各种元素的高亮效果,就不用在手动设置border的宽度来配合目标元素的宽度和高度,有没有一个通用的方法?这就需要用JS来实现啦,js的实现思路如下:

1 获取目标元素的宽度和高度,targetWidth,targetHeight

2 获取页面的宽度和高度,pageWidth,pageHeight

3 获取目标元素在页面中的位置,offsetTop,offsetLeft(目标元素距离 页面顶部的距离,距离页面左边的距离,包括页面的滚动条)

4 设置遮罩层的宽度和高度等于目标元素的宽度和高度

5 最重要的一步,设置 遮罩层的四个边框的大小是决定效果至关重要的一步。

上边框 = offsetTop

右边框 = pageWidth - targetWdith - offsetLeft

下边框 = pageHeight - targetHeight - offsetTop

左边框 = offssetLeft

6 针对于浏览器的resize事件,同步实现遮罩边框的改变

源码如下:


请添加您的收货地址


您的姓名


请添加您的电话号码3请添加您的电话号码

    
这样就可以实现一个页面多个高亮区域不停的来回调动

css3遮罩——新功能引导层_第3张图片

完全是张鑫旭的思路和代码,就拿来用了,算是学到了一招,弄明白了。有空了,用JQ再来写一遍。

你可能感兴趣的:(JS,jQuery特效实例)