縮略圖滾動標題淡入淡出位置

在我的縮略圖滾動我有一個：<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

縮略圖滾動標題淡入淡出位置

回答

相關問題