Question

在我的缩略图滚动条中，我有一个：<span id="tt" style="display:none;"></span>由jquery淡入/淡出脚本驱动，我想将它放在缩略图容器之外。 span标记的css是： span#tt { position:absolute; left:0; top:0; }

您可以查看缩略图滚动条here

Answer 1

如果我理解你，这些就可以胜任。

#tt {
    position:absolute;
    left:0;
    top: 0;
    margin-top:-20px; /*added*/
}
.jThumbnailScroller{
    position:relative;
    width:800px;
    height:260px; /*changed 255px set it if you change #tt margin-top value*/
    margin:0; 
    padding:0;
    overflow:hidden
}
.jThumbnailScroller#tS1{
    position:relative;
    width:100%;
    margin-top:100px;
    padding-top:20px
}

还编辑了您的提示脚本。它正在闪烁如果你在图像上移动得更快，因为你的脚本在完成淡出之前试图将其淡化。

jQuery(document).ready(function(){    

var link = jQuery('.jTscroller a');

link.each(function(){
    $(this).mouseenter(function(){
        var imgtitle = $(this).find('img').data('title');
        $('#tt').html(imgtitle);
        $('#tt').fadeIn('slow');

        $(this).mouseleave(function()
        {
            $('#tt').hide();
        });
    });
});
});

这是jsfiddle http://jsfiddle.net/dsu9a/7/

别忘了删除这些代码。这是为了纠正img链接与实际的小提琴。

jQuery(document).ready(function(){
   var img = jQuery('.jTscroller a img');
    img.each(function(){
        var url = $(this).attr('src');
        $(this).attr('src','http://outboxvision.com/test/'+url)
    });
});

像这样纠正你的HTML。

<body>
    <div id="tt"></div>
<!-- rest of the code -->

缩略图卷轴标题淡入淡出位置

1 个答案: