Question

我无法找到一种方法来应用我正在制作的jquery插件的效果，我已经有了它的工作，但这不是我真正想要的方式，所以我需要一些指导

Jquery插件将图像分成小方块，这是div，所以我可以从角落开始应用淡入效果，现在每个div都有相同的CSS类，但名称不同，它们的名称是根据div的顺序是apear ...问题是我现在不知道如何使用名称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 PLUGIN

(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的名字来做？

Answer 1

首先，我很确定您不应在name元素上使用<div>属性。

那么为什么不使用classname，因为它使用与name属性相同的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'
    })
);  
...

现在，您可以将一些CSS添加到所有slice类，并将jQuery添加到特定的slice3类。

CSS：

slice {
    background: green:
}

JS：

$('.slice3').click(...);

Answer 2

这是一个适合您案例的选择器：

$('div[name="3"]')

对同名属性的div应用jquery效果

2 个答案: