demo01.htm
复制代码 代码如下:
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;}
方向反馈
反馈方向
rollingMask-0.1.0.js
复制代码 代码如下:
$.extend({
rollingMask:function(opt,callback){
this.defaults = {
objId:"", // 容器id
content:"test", // 卷帘内容
opacity: 0.8,
fadeSpeed:150 // 卷帘消失的时间
};
// 参数初始化
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("" + opts.content + "");
$("#" + 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();
});
}
}
);
}
});
