0

我创建了一个小幻灯片，我有一个大的宽屏幕来显示全尺寸的图像，它下面有一个小条用于拇指图像，它将创建图像，创建容器，它会通过一个按钮来完成。 ..一切都很好，拇指将在容器中创建，

现在我想知道用户悬停的图像中的哪一张，并计算容器边缘和点击图像之间的空间，为此我需要每个拇指宽度，（我在代码上评论问题-第二部分）

我想在用户鼠标悬停的地方通过它的 id 来获取它们并做一些额外的动作，这就是问题所在，它只是返回“未识别”，我无法获得它们的宽度，

“t”、“w”和“s”在控制台日志中未识别。

如果我不动态创建拇指，我可以得到它们，

任何人都可以帮忙吗？

小提琴链接

/////////////////第一部分

var slides=new Array('_images/0.jpg' , '_images/1.jpg' , '_images/2.jpg' ,               '_images/3.jpg',
                         '_images/4.jpg','_images/5.jpg','_images/6.jpg',
                         '_images/7.jpg','_images/8.jpg');




var img = new Array();                       

$(function () {


    $('#start').click(function(){


        var thumbContainerWidth = 0 ;

        for( i = 0 ; i < slides.length ; i++){





            img[i] = $('<img class="thumb" id="thumb_' + i + ' " >');
            img[i].css({ "margin-left": 10 + "px"       ,
                         "opacity"    : 0               ,
                         "float"      : "left"          , 
                         "padding"    : "5px 0 5px 0"   ,

            });
            img[i].attr( "src",slides[i] );
            $('#thumbContainer').append( img[i] );

            //10px Extra space for paddings 
            temp = img[i].width() + 10 ;
            thumbContainerWidth += temp;
            $('#thumbContainer').width( thumbContainerWidth);
            console.log('Preperation ' + i);
            console.log(thumbContainerWidth );

       }



    //Start !

    var j = 0;

    handle = setInterval( function() {


            img[j].fadeTo(1500,1);

            console.log('here we go ->' + j);
            j++;

            if( j >= slides.length) {

                clearInterval( handle );
                return 1;
            }

    },1000);

/////////////////////问题-第二部分

    $('.thumb').on("hover", function(){


        id  = $(this).attr('id');
        id = "#" + id;

        w = $(id).width();
        t = $('#thumb_5').width();

        var s = $(id).prevAll().width();
        $(id).css("opacity",".7");

        console.log(id +  '?' + w + '->' + s + t);

        } );    



    });





    });
4

3 回答 3

0

为图像标签提供宽度，例如

img[i] = $('<img class="thumb" id="thumb_' + i + ' " >');

用。。。来代替

img[i] = $('<img class="thumb" width="<your image width>" id="thumb_' + i + ' " >');

然后你可以从 jQuery 语句中获取图像的宽度

我已经修复了您的 jsFiddle 并进行了更新，您可以在http://jsfiddle.net/kUBsa/6/上查看它

于 2013-07-06T08:18:01.293 回答
0

我认为问题在于，您在将其 IMG 标记附加到 DOM 之后，当它尚未从服务器加载时，您正试图获取图像的宽度。

您应该确保仅在图像加载完成后才开始计算。

于 2013-07-06T08:29:08.730 回答
0

试试喜欢

temp = $('#thumb_'+i).width();
temp += 10;

或者可以直接点赞

temp = $('#thumb_'+i).width() + 10 ;
于 2013-07-06T07:28:20.993 回答