缩略图滚动标题淡入淡出位置

在我的缩略图滚动我有一个：<span id="tt" style="display:none;"></span>这是由jQuery淡入/淡出脚本驱动，我想把它放在缩略图容器之外。为span标签的CSS是： span#tt { position:absolute; left:0; top:0; }缩略图滚动标题淡入淡出位置

您可以查看缩略图滚动here

来源

2011-11-29 agis

如果我理解你很好，这将做的工作。

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

来源

2011-11-29 17:00:58 tuze

是否可以删除底部滚动条？并且每个图像的标题淡入都具有固定的位置？ – agis

只做了一些改进。 “每张图片的标题淡入以确定位置？”是什么意思？ – tuze

我的意思是所有的图像标题淡入和特定的地方。 – agis

缩略图滚动标题淡入淡出位置

回答

相关问题