Fatal编程技术网
  • javascript/
  • Javascript 对同名属性的div应用jquery效果

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

javascript jquery class plugins

Javascript 对同名属性的div应用jquery效果,javascript,jquery,class,plugins,effects,Javascript,Jquery,Class,Plugins,Effects,我很难找到一种方法将efect应用到我正在制作的jquery插件中，我已经让它工作了，但这不是我真正想要的方式，所以我需要一些指导 Jquery插件将图像分割成小正方形，这些正方形是div，这样我就可以从角落开始应用淡入效果，现在每个div都有相同的CSS类，但名称不同，它们的名称是根据div的排列顺序给出的。。。问题是我现在不知道如何让所有名为3的div同时淡入。。这是密码 HTML <!DOCTYPE html> <html> <head>

我很难找到一种方法将efect应用到我正在制作的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>


移动电话网
$（文档）.ready（函数（）{
$（“#contendor”）。separar（4）；
});
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);

（函数（$）{
$.fn.separar=函数（cantidad）{
var contendor=$（此值）；
var slides=$（this.children（）；
var altoTotal=contendor.height（）；
var-lastId=0；
分离幻灯片（contendor，幻灯片[0]）；
aparecer（）；
功能分离幻灯片（滑块，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；
对于（var j=0；j对于（i=1；i首先，我非常确定您不应该在
元素上使用
name
属性

那么为什么不直接使用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'
    })
);  
...                    


JS:


以下是一个适用于您的案例的选择器：


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



$（'div[name=“3”]”我认为可以：D它可以工作！！真的很有效！谢谢Jeff！谢谢！这么简单的解决方案谢谢你的时间：），不知道名称可以这样检索谢谢againI’将其添加为答案than。很高兴它对您有效是的，实际上我是这样的，它使用类就像它是名称一样，只是后来我想对类切片应用css，所以我只希望所有div都是同一个类，因为这违反了HTML规范现在可以使用了，但不能保证Chrome 36上市后可以使用。你不应该在
div
上使用
name
属性，因为HTML5规范不允许这样做：。你可以看到这个页面说
div
上允许的
内容属性是
全局属性，其中
name
不是其中的一部分！哦，我不知道这是坏的，因为最佳的编码实践，我不再使用它了，谢谢你的支持answer@DamianNuñez我仍然会记住Jeff的答案，因为这种格式可以用来选择jQuery中任何属性的特定值e、 这里：。请注意，这有不同的形式，使用像
*=
和
~=
这样的东西对属性值进行不同类型的匹配。虽然这可能适用于OP，但我想重复我上面的警告：
名称
属性不应该用于div。解释为什么不应该这样做可能更有帮助l、 @Steve's answer上的评论解释了他的评论。错过了那条评论，或者它只是在这个答案之后发布的，但这是有意义的。我没有意识到它在HTML5中被删除了，我在你的答案之后发布了它。无法及时找到正确的链接，所以我只是发布了我知道的内容，并提供了后续证据。：）仅供参考，它没有在HTML5中删除，也从来没有在任何HTML规范中删除过。

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



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