jquery卷帘效果实现代码（不同方向)

demo01.htm复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title方向反馈/title style type='text/css' html，body { margin :0 padd :50 px } # wrap { position : relative宽度宽度：400像素高度：300 px背景# 33 aa 00 margin 336050 pxdisplay :直列块；font-size :50 px文本对齐：居中；线高：300 px飞越：隐藏；} /style body div id='wrap '方向反馈/div div id=' result ' span style=' color : # FFF；'反馈方向/span /div脚本src='http:/jquery-1。8 .0 .量滴js ' type=' text/JavaScript '/script script src=' http :滚动掩码-0。1 .0 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ $).rollingMask({ objId:'wrap '，content:$('#result ').html()})；});/script/body/html滚动掩码-0。1 .0 .射流研究…复制代码代码如下： /** * 不同方向的卷帘效果* **/$.extend({ rolling mask :函数(opt，callback){ this。default={ objid : ' '，//容器id content:'test '，//卷帘内容opacity: 0.8，fadeSpeed:150 //卷帘消失的时间};//参数初始化var opts=$ .extend(this.defaults，opt)；var内容id=opts。Objid ' _ contentvar show id=opts . Objid ' _ show $(" # " opts。Objid ).绑定(' mouseenter mouseleave '，函数(e) { var w=$(this).宽度();var h=$(这个)。高度();var x=(e .第x页-这个。offsetleft-(w/2))*(w h？(h/w): 1)；var y=(e . pagey-this。offsettop-(h/2))*(h w？(w/h): 1)；定义变量方向=Math.round((((Math.atan2(y，x) * (180/Math .PI))180)/90)3)% 4；var eventType=e.typeif(e . type=='鼠标输入'){ $(' # ' opts。Objid ).追加(“div id=\”内容id“\”选项。content '/div ')；$(“#”ContentID).css({ 'position':'absolute '，' width':w 'px '，' height':h 'px '，' top':'0px '，' left':'0px '，' background':'#F55 '，opa city 3360 opts。不透明度})；开关（方向){ case 0: $('#' contentId).css('top '，-h ' px ')；打破；案例1: $(“#”ContentID).css(“”左，w ' px ')；打破；案例2: $(“#”ContentID).css('top '，h ' px ')；打破；案例3: $(“#”ContentID).css('left '，-w ' px ')；打破；} $(“#”ContentID).动画({'top':'0px '，' left ' : ' 0px ' })；} else { $(“#”ContentID).fadeOut(opts.fadeSpeed，function(){ $('#' contentId).移除();});} } );} });