Demo01.htm
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> direction feedback </title>
<Style type = "text/css">
Html, body {margin: 0; padding: 50px ;}
# Wrap {position: relative; width: 400px; height: 300px; background: #33aa00; margin: 50px; display: inline-block; font-size: 50px; text-align: center; line-height: 300px; overflow: hidden ;}
</Style>
<Body>
<Div id = "wrap">
Direction feedback
</Div>
<Div id = "result">
<Span style = "color: # FFF;"> feedback direction </span>
</Div>
<Script src = "../jquery-1.8.0.min.js" type = "text/javascript"> </script>
<Script src = "rollingMask-0.1.0.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$. RollingMask ({
ObjId: "wrap ",
Content: $ ("# result" example .html ()
});
});
</Script>
</Body>
</Html>
RollingMask-0.1.0.js
Copy codeThe Code is as follows:
/**
* Shutter effects in different directions
*
**/
$. Extend ({
RollingMask: function (opt, callback ){
This. defaults = {
ObjId: "", // container id
Content: "test", // shutter content
Opacity: 0.8,
FadeSpeed: 150 // The time when the shutter disappears
};
// Parameter initialization
Var opts = $. extend (this. defaults, opt );
Var contentId = opts. objId + "_ content ";
Var showId = opts. objId + "_ show ";
$ ("#" + Opts. objId). bind ("mouseenter mouseleave ",
Function (e ){
Var w = $ (this). width ();
Var h = $ (this). height ();
Var x = (e. pageX-this. offsetLeft-(w/2) * (w> h? (H/w): 1 );
Var y = (e. pageY-this. offsetTop-(h/2) * (h> w? (W/h): 1 );
Var direction = Math. round (Math. atan2 (y, x) * (180/Math. PI) + 180)/90) + 3) % 4;
Var eventType = e. type;
If (e. type = 'mouseenter '){
$ ("#" + Opts. objId ). append ("<div id = \" "+ contentId +" \ ">" + opts. content + "</div> ");
$ ("#" + ContentId).css ({
"Position": "absolute ",
"Width": w + "px ",
"Height": h + "px ",
"Top": "0px ",
"Left": "0px ",
"Background": "# F55 ",
Opacity: opts. opacity
});
Switch (direction ){
Case 0:
$ ("#" + ContentId).css ("top",-h + "px ");
Break;
Case 1:
$ ("#" + ContentId).css ("left", w + "px ");
Break;
Case 2:
$ ("#" + ContentId).css ("top", h + "px ");
Break;
Case 3:
$ ("#" + ContentId).css ("left",-w + "px ");
Break;
}
$ ("#" + ContentId). animate ({"top": "0px", "left": "0px "});
} Else {
$ ("#" + ContentId). fadeOut (opts. fadeSpeed, function (){
$ ("#" + ContentId). remove ();
});
}
}
);
}
});