0

作成しているjqueryプラグインにエフェクトを適用する方法を見つけるのに問題があります。すでに機能していますが、それは私が本当に望んでいた方法ではないため、いくつかのガイダンスが必要です。

Jqueryプラグインは、画像をdivである小さな正方形に分割するため、コーナーからフェードイン効果を適用できます。これで、すべてのdivに同じCSSクラスがありますが、名前が異なり、名前は次の順序に従って付けられます。 divが表示される必要があります...問題は、たとえば名前3のすべてのdivを同時にフェードインさせる方法がないことです。これがコードです。

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <script src="jquery.js" type="text/javascript"></script>
        <script src="separar.js" type="text/javascript"></script>

        <title>AEMB Portales Web</title>        
    </head>

    <body>
        <div id="contenedor" style="width:800px; height:508px; position:relative; margin:0 auto;">
            <a href="#"><img src="img/fma.jpg"  /></a>
        </div>

        <script>
            $(document).ready(function(){
                $("#contenedor").separar(4);
            });
        </script>
    </body>
</html>

JQUERYプラグイン

(function($){

$.fn.separar =  function(cantidad){
    var contenedor = $(this);
    var slides = $(this).children();
    var altoTotal = contenedor.height();
    var lastId = 0;


    separarslides(contenedor,slides[0]);
    aparecer();

    function separarslides(slider, hijo) {
        var imagen = hijo.children[0];
        $(hijo).hide();

                var anchoSlide = Math.round(slider.width()/cantidad);
                var altoSlide = Math.round(slider.height()/cantidad);
                var id = 0;
                var idFila = 1;

                for(var j = 0; j < altoTotal; j+=altoSlide){    
                    id = idFila;
                    for(var i = 0; i < cantidad; i++){                  
                        slider.append(
                            $('<div class="slice'+id+'" style="position:absolute;" name="'+id+'"><img src="'+ $(imagen).attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:'+slider.height()+'px; display:block !important; top:'+ j*-1 +'px;; left:'+ i * anchoSlide*-1 +'px;" /></div>').css({ 
                                left:(anchoSlide*i)+'px',
                                top:j+'px',                         
                                width:anchoSlide+'px',
                                height:altoSlide+'px',
                                opacity:'0',
                                overflow:'hidden'
                            })
                        );                      
                        lastId = id;
                        id++;                       
                        if(i==3)
                           idFila++;                       
                    }                   
                }
        //slider.append($(alert(lastId)));  //Para ver el numero final que tiene lastId
    } 


    function aparecer(){

            var slices = $('.slice', contenedor);
            var time = 500;

            for(i=1;i<=lastId;i++){
               $(".slice"+i).fadeTo(time,1);
               time+=650;
            }
    }  
  }  
})(jQuery);

javascriptの最後の関数はdivの表示を担当しますが、その場合、divは異なるクラスを持っていますが、どうすればdivの名前でそれを作成できますか？

4

2 に答える 2

1

まず、要素にname属性を使用するべきではないと確信しています。<div>

では、名前属性と同じIDを使用するので、クラス名だけを使用してみませんか？

$('.slice3')

編集：これは私がそれをどのように構成するかの例です：

...
slider.append(
    $('<div class="slice slice'+id+'" style="position:absolute;"><img src="'+ $(imagen).attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:'+slider.height()+'px; display:block !important; top:'+ j*-1 +'px;; left:'+ i * anchoSlide*-1 +'px;" /></div>').css({ 
        left:(anchoSlide*i)+'px',
        top:j+'px',                         
        width:anchoSlide+'px',
        height:altoSlide+'px',
        opacity:'0',
        overflow:'hidden'
    })
);  
...

sliceこれで、CSSをすべてのクラスに追加し、jQueryを特定のクラスに追加できますslice3。

CSS：

slice {
    background: green:
}

JS：

$('.slice3').click(...);
于 2013-03-08T18:37:05.303 に答える
0

これがあなたのケースで機能するセレクターです：

$('div[name="3"]')
于 2013-03-08T18:46:29.307 に答える