jquery 롤링 셔터 효과 구현 코드(다른 방향)_jquery

demo01.htm

复主代码 代码如下:

<머리>



<본문>

방向反馈

反馈方向

rollingMask-0.1.0.js

复代码 代码如下:

/**
* 다양한 방향의 롤러 블라인드 효과
*
**/
$.extend({
rollingMask:function(opt,callback){
this.defaults = {
objId:"", //容器id
content:"test", // 卷帘内容
불투명도: 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); .pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1)
var 방향 = 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 ({
"위치":"절대",
"너비":w "px",
"높이":h "px",
"상단":"0px",
"왼쪽":"0px",
"배경":"#F55",
opacity:opts.opacity
});
스위치(방향){
case 0:
$("#" contentId).css("top",-h "px");
휴식;
사례 1:
$("#" contentId).css("left",w "px");
휴식;
사례 2:
$("#" contentId).css("top",h "px");
휴식;
사례 3:
$("#" contentId).css("left",-w "px");
휴식;
}
$("#" contentId).animate({"top":"0px","left":"0px"});
}else{
$("#" contentId).fadeOut(opts.fadeSpeed, function(){
$("#" contentId).remove();
});
}
}
);
}
});