최근에는 특히 js의 플러그인 캡슐화에 관심이 많습니다. 현재 기술로는 아직 js를 완전히 캡슐화하는 것이 어렵기 때문에 jQuery 기반으로 작은 플러그인을 캡슐화하고 이를 기반으로 개발했습니다. 객체 수준. 전역 메서드를 추가하지 않습니다. 고급 구문이 거의 없습니다. 개체 인스턴스 자체를 반환하는 return: foreach() 메서드와 매개 변수 개체의 속성을 확장하는 확장() 함수도 조정 후 개체 연결을 용이하게 하기 위한 것입니다. 내 방법.
현재 플러그인은 정상적으로 실행이 되지만, 브라우저 탭을 전환하여 플러그인 페이지가 표시되지 않고, 잠시 후 다시 전환하면 렉이 발생할지는 모르겠습니다. 아직 상황은 어떤지 아시는분 조언 부탁드립니다. 최적화해야 할 부분이 많네요. 좋은 아이디어 있으면 바로 수정하겠습니다. 적시에.
칸 : gif 이미지가 좀 클 수도 있고 좀 지나면 움직일 것 같아요. 인내심을 가지세요
(함수($){
$.fn.activiTag = 기능(옵션) {
opts = $.extend({
move_step:2, // 요소 이동 단계 크기--px
move_speed:40, // 요소 이동 속도--ms
init_speed:1000,//요소 생성 속도--ms
> min_opacity:0,
max_grain: 10, // 최대 입자 크기
// 라벨 배열 >
a_List: ["
요소를 추가하세요","
Spring Jpa 자세한 설명","
javamailmail"], // 태그 문자열 배열
// 배경색 배열
Color_list: ['#cd2626', '#8b4513', '#696969', '#ff8c00', '#6495ed'] // 태그 색상 배열
},opts||{});
var aTag = $(this); // 현재 컨테이너 객체
var T_width = aTag.width(), T_height = aTag.height() // 컨테이너 높이, 너비
return this.each(function(){
~
함수 settatagcss () {// 해당 CSS 설정
aTag.css({position:'relative',overflow:'hidden'});
}
~
function getRandomNum(Min, Max){ // 두 간격 내에서 난수 가져오기
Min = 새 숫자(Min);Max = 새 숫자(Max);
var 범위 = 최대 - 최소 1;
var Rand = Math.random();
Min Math.floor(Rand * Range)를 반환합니다.
}
~
함수 getrandomxy (num) {//양수/음수 매개변수를 무작위로 반환
num = 새 숫자(num);
If(Math.random()<=0.5)
num = -num;
반환 번호
}
~
/**
* 컨테이너 너비의 1/3 너비로 태그를 무작위로 생성한 후 자체 기준으로 너비의 1/5
* 높이는 너비의 1/3, 그 다음은 1/3
*/
함수 createATag() {
var i = getRandomNum(0,opts.a_List.length-1);
var a = $(opts.a_List[i]); aTag.append(a);
반환;
}
~
/**태그 CSS 스타일 설정 **/
함수 setCss(a) {
var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
var h = Math.ceil(w/3) getRandomXY(w/36) // 행 높이
var zIndex = Math.ceil(Math.random()*400);
var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// 줄 높이, 레이어 수, 투명도
a.css({
불투명도:rdmOpcy,
zIndex: zIndex,
lineHeight:h 'px',
위치: '절대',
textDecoration:'없음',
textAlign:'center',
borderRadius: '3px',
색상:'#FFFFFF',
공백: 'nowrap',
});
반환;
}
~
/**컨테이너를 기준으로 라벨의 초기 위치 계산(X_Y 좌표) **/
함수 setXY(a) {
var x = getRandomNum(0,(T_width-a.width()));
var y = getRandomNum(0,T_height/10);
a.css({왼쪽:x 'px', 아래쪽:y 'px'});
반환;
}
~
/**임의의 배경색 설정 **/
함수 setColor(a) {
var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({배경색상:opts.color_List[i]})
}
~
/**생성자 항목 **/
함수 구성() {
var a = createATag();
setCss(a);
setColor(a) // 색상
setXY(a);
반환;
}
~
/**애니메이션 타이머 기능 **/
함수 interVal(a,s_opcy,botm,n,space,s) {
var opcy = a.css('opacity') // 투명도
var botm_ = a.css('bottom').replace('px','') // 실시간 바닥 거리
var opcy_ =parseFloat(new Number(a.css('opacity'))) s_opcy;
var _opcy_ = parsFloat(new Number(a.css('opacity'))) - s_opcy;
var fall = botm_ - botm // 이동 거리
botm_ = 새 번호(botm_) 새 번호(opts.move_step);
a.css({
표시: '차단',
하단: botm_,
});
If(fall < n)
{A.CSS({OPACITY: OPCY_})}
그렇지 않으면 (2*n & lt; fall)
~ ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
~
If (botm_ >= space)
{
~ ~
a.remove();
}
}
~
함수 init() {
If(aTag.children('a').length >= new Number(opts.max_grain))
반품
var a = 구성();
var opcy = a.css('opacity') // 투명도
var zInx = a.css('zIndex');
var botm = a.css('bottom').replace('px','') // 바닥까지의 초기 거리
var space = T_height - a.height() - a.css('bottom').replace('px','') // 이동할 거리
var n = 공백/3;
var 단계 = 1-opcy;
var sec = n/opts.move_step*opts.move_speed/1000; // 거리/단일 단계 길이 * 단일 단계 길이 초 = 필요한 초 수
var s_opcy = opts.move_speed/1000/sec * step; // 각 루프에서 변환해야 하는 투명도 값
var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
Var Curropcy; // 마우스가 움직일 때 투명도를 기록합니다
// console.log(opts.move_speed '....' speed_)
/**요소 이동 루프 **/
var s = setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
}, 속도_)
A.Mouseover(함수() {//마우스 이동
currOpcy = a.css('opacity');
~ ~
$(this).css({
zIndex: 401,
불투명도: 1
});
});
a.mouseout(function(){ // 마우스 아웃
$(this).css({
zIndex: zInx,
불투명도: currOpcy
});
s= setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
},속도_);
});
}
setATagCss();
setInterval(init,opts.init_speed);
});
}
})(jQuery)
HTML:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
