썸네일 내가 가지고 내 썸네일 스크롤에서 제목 페이드 위치

를 스크롤 : /에 JQuery와 페이드에 의해 구동되는 <span id="tt" style="display:none;"></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

방금 약간의 improvments를 만들었습니다. "고정 된 위치를 갖는 모든 이미지의 제목이 바래다"라는 것은 무엇을 의미합니까? – tuze

모든 이미지 제목이 특정 위치로 페이드 인/페이 아웃되는 것을 의미합니다. – agis

썸네일 내가 가지고 내 썸네일 스크롤에서 제목 페이드 위치

답변

관련 문제