멋진 썸네일 호버 효과

Question

나는 스크립트를 사용합니다 - 탭이있는 콘텐츠 영역 내의 아주 작은 이미지 갤러리 용입니다.

내가 사용하고 있습니다. http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/하지만 크기가 거의 4 분의 1로 커스터마이즈 된 이미지를 3 개 이미지로 재구성하여 엄지 손가락을 '기본보기'이미지 영역 바로 아래에 배치했습니다. 나는 그것을 성공적으로했으며 시각적으로 훌륭했습니다.

엄지 손가락은 약 50px이며 마우스를 올리면 약 60px로 확장되고 클릭하면 정확한 이미지가 표시된 기본보기 영역이 나타납니다.

이 스크립트를 반복적으로 사용했기 때문에 문제가 발생했습니다. 어떤 이유로 3 개의 엄지 손가락의 매개 변수가 기본보기 위에 복제되지만 실제 이미지는 보이지 않습니다. 사용자가 기본보기 위에 마우스를 올려 놓으면 (50px 60px 정사각형/사각형 매개 변수 사이의 위치) 아래 이미지의 호버가 나타납니다.

저는 코드를 반복해서 읽었습니다. 누군가가 저에게 훌륭한 제안을 던질 수 있다면 어리 석다는 것을 압니다.

다음은 상황을 보여주는 스크린 샷입니다.http://tinypic.com/r/2nt8o7t/7

마크 업 :

<!-- Thumb Gall Mark-Up --> 

<div class="containerslide"> 

<ul class="thumb"> 

    <li><a href="img/appimg_1.jpg"><img src="img/appimg_1.jpg" alt="" /></a></li> 
    <li><a href="img/appimg_2.jpg"><img src="img/appimg_2.jpg" alt="" /></a></li> 
    <li><a href="img/appimg_3.jpg"><img src="img/appimg_3.jpg" alt="" /></a></li> 


</ul> 

<div id="main_view"> 

    <img src="img/appimg_1.jpg" alt="" /></a><br /> 

</div> 
</div> 

<!--End Thumb Gall Mark-Up--> 

쿼리 :

 <script src="js/modernizr.custom.37797.js"></script> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 
    $(this).css({'z-index' : '10'}); 
    $(this).find('img').addClass("hover").stop() 
     .animate({ 
      marginTop: '0px', 
      marginLeft: '0', 
      top: '360px', 
      left: '0', 
      width: '65px', 
      overflow: 'hidden', 
      height: '80px', 
      padding: '3px' 
     }, 200); 

    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).find('img').removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '360px', 
      left: '0', 
      width: '60px', 
      overflow: 'hidden', 
      height: '60px', 
      padding: '3px' 
     }, 200); 
}); 

//Swap Image on Click 
    $("ul.thumb li a").click(function() { 

     var mainImage = $(this).attr("href"); //Find Image Name 
     $("#main_view img").attr({ src: mainImage }); 
     return false;  
    }); 

}); 
</script> 

CSS의; 이이 일이 내가 여기에 불필요한 a 태그를 참조

<!--minSlide Show Styles --> 

* { padding: 0;} 
img {border: none;} 
.containerslide { 
    margin-top: -71px; 
} 

ul.thumb { 
    float: left; 
    list-style: none outside none; 
    padding: 12px; 
    width: 360px; 
} 

ul.thumb { 
    width: 360px; 

} 


ul.thumb li { 
    padding: 3px; 
    float: left; 
    position: relative; 
    width: 60px; 
    height: 60px; 

} 
ul.thumb li img { 
    width: 60px; height: 60px; 
    border: 1px solid #ddd; 
    padding: 3px; 
    background: #f0f0f0; 
    position: absolute; 
    left: 0; 
    -ms-interpolation-mode: bicubic; 
    margin-top: 365px; 

} 
ul.thumb li img.hover { 
    background:url(thumb_bg.png) no-repeat center center; 
    border: none; 


} 
#main_view { 
    float: left; 
    margin-left: -217px; 
    margin-top: 41px; 
    padding: 9px 0; 
} 




<!-- End Slide Show Styles --> 

Answer 1

,

<div id="main_view"> 

    <img src="img/appimg_1.jpg" alt="" /></a><br /> 

</div> 

. 어쩌면 이것은 문제를 만들고 전체 대본을 방해 할 수 있습니다. 문제가 여전히 지속된다면, 바이올린을 게시하십시오.