jQuery 拥有以下滑动方法：
slideDown() 向下滑动
slideUp() 向上滑动
slideToggle() 点一下向下滑动展开，再点一下还原！
一、图片蒙版
.demo1 {
background : url("images/logo.png") no-repeat
-webkit-mask : url("images/mask.png")
}
它的属性值与background的语法基本一样，相关的属性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。
下面就是其实现的效果图：
这里需要注意的是第二张mask.png中黑色部分的透明度（alpha）值为1，将完全显示其下方的图片区域，而其余部分的透明度为0（alpha值），将完全覆盖其下方的图片区域。
二、渐变蒙版
.demo1 {
background : url("images/logo.png") no-repeat
-webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}
其属性值为CSS渐变老式语法：-webkit-gradient(<type>, <point>[, <radius>]?, <point>[, <radius>]? [, <stop>]*)
而新式语法：-webkit-linear-gradient( [<point>|| <angle>,]? <stop>, <stop>[, <stop>]* ) 经过我的测试发现暂不支持
效果图如下：
三、logo遮罩动态效果
利用-webkit-mask我们还可以制作炫酷的logo遮罩动画效果，用js控制让蒙版动起来。效果图如下：
实现代码如下：
$(function(){
$(".mask").mouseover(function(){ var b=0,c=$(this),
d=setInterval(function(){ if(b>parseInt(c.width()+50)){clearInterval(d)}
c.css({"-webkit-mask":"-webkit-gradient(radial, 88 53,"+b+", 88 53, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))"})
b++
},0)
})
})
通过setInterval来对遮罩层渐变位置进行动态变化。
我们还可以改变渐变的起点和终点位置来实现不同的效果：
-webkit-gradient(radial, 0 0,"+b+", 0 0, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))
你说的是不是常见的那种 弹出一个半透明遮罩层,同时不能操作页面相关对象,只能操作在遮罩层以上的内容?实际这个效果很简单,半透明遮罩层(是不是半透明无所谓)是实现了和文档document同宽同高,但是css的z-index属性要大于普通内容的一个空白div,这个div做了半透明效果,隔离了所有事件,你鼠标在网页上面的点击,移动,拽托等操作只作用于这个div,因此原网页的所有事件均失效.
在遮罩层上一般还会有一个可操作域(div2),这个同理,这个div2的z-index要大于遮罩层的z-index,从而他会在遮罩层以上,而能实现其操作.
以上是原理,那么实现起来要分一些几个步骤:
1,遮罩层(可以事先就进行半透明处理和document等宽等高处理,这个需要通过js编写)和可操作域(div2) 的display属性设置为none.处于隐藏状态.
2,当网页需要激活遮罩事件的时候,js将遮罩层和可操作域的display设置为block.处于显示状态,当在可操作域关闭事件触发的时候,同时将遮罩和可操作域隐藏.
需要注意的是,遮罩层最好是在body的根目录下,并position设置为绝对定位,这样布局比较方便
