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>

查询插件

(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>

那么为什么不直接使用类名，因为它使用与您的 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(...);
于 2013-03-08T18:37:05.303 回答
0

这是一个适用于您的情况的选择器：

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