Demo01.htm
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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"). HTML ()
});
});
</script>
</body>
Rollingmask-0.1.0.js
Copy Code code as follows:
/**
* Shutter effect in different directions
*
**/
$.extend ({
Rollingmask:function (Opt,callback) {
This.defaults = {
ObjID: "",//Container ID
Content: "Test",//shutter contents
opacity:0.8,
Time of fadespeed:150//shutter disappearing
};
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 ();
});
}
}
);
}
});
