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

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