jQuery 동적 클라우드 태그 플러그인_jquery

머리말:

최근에는 특히 js의 플러그인 캡슐화에 관심이 많습니다. 현재 기술로는 아직 js를 완전히 캡슐화하는 것이 어렵기 때문에 jQuery 기반으로 작은 플러그인을 캡슐화하고 이를 기반으로 개발했습니다. 객체 수준. 전역 메서드를 추가하지 않습니다. 고급 구문이 거의 없습니다. 개체 인스턴스 자체를 반환하는 return: foreach() 메서드와 매개 변수 개체의 속성을 확장하는 확장() 함수도 조정 후 개체 연결을 용이하게 하기 위한 것입니다. 내 방법.

플러그인 패키지 다운로드 주소: 다운로드하려면 여기를 클릭하세요

플러그인 이름: Dynamic Cloud Tag

플러그인 기능:

지정된 블록 수준 요소 내에서 태그를 동적으로 생성
라벨의 높이, 너비, 위치, 레이어 수, 배경색을 임의로 제어 가능
라벨이 페이드 인/아웃되며 초기 투명도를 변경할 수 있습니다
라벨 생성 속도, 이동 속도 조절 가능(타이머)
라벨 이동의 단계 크기를 제어할 수 있습니다(각 주기에서 이동하는 거리)
마우스를 올리면 투명도가 최대화되고 레이어 수가 가장 많은 상태로 애니메이션이 중지됩니다. 마우스가 떠나면 이전 상태가 복원됩니다.
문제 발생:

현재 플러그인은 정상적으로 실행이 되지만, 브라우저 탭을 전환하여 플러그인 페이지가 표시되지 않고, 잠시 후 다시 전환하면 렉이 발생할지는 모르겠습니다. 아직 상황은 어떤지 아시는분 조언 부탁드립니다. 최적화해야 할 부분이 많네요. 좋은 아이디어 있으면 바로 수정하겠습니다. 적시에.

애니메이션 효과:

칸 : gif 이미지가 좀 클 수도 있고 좀 지나면 움직일 것 같아요. 인내심을 가지세요

JS 코드 조각:

코드 복사 코드는 다음과 같습니다.

(함수($){
$.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:

코드 복사

코드는 다음과 같습니다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">






$(함수(){
    $('#tag').activiTag({});
});

<스타일>
    #태그{
        테두리:1px 점선 회색;
        너비:250px;
        높이:250px;
        상단: 50px;
        왼쪽: 300px;
    }
    와{
        패딩:0px 3px;
        글꼴 크기:12px;
        공백: nowrap;
        디스플레이:없음;
    }