jquery preview 다중 다중 이미지 thumbnail

단일 이미지에 배치되는 많은 엄지 손가락의 유튜브처럼 이미지 미리보기 위에 마우스를 놓을 수있는 방법이 있습니까? 아래 이미지를 참조하십시오. 나는 많은 이미지를 회전 시켜서 normaly가 끝났음을 알고 있지만, 샘플에서 나는 엄지가 많은이 한 이미지를 가지고있다.jquery preview 다중 다중 이미지 thumbnail

enter image description here

출처

2013-06-11 django

당신이 원하는 게 무엇인지 확실하지. 미리보기 이미지에 다른 이미지가있는 것이 더 쉽습니다. 당신은 큰 이미지가있는 경우 당신은 몇 가지 리 요소를 가질 생각은 CSS 스프라이트를 Css-Tricks

를 사용하고 배경으로 큰 이미지를 넣어 다음 각 리 배경 위치

<html> 
<head> 
<style> 
ul   {padding: 0px; width: 640px;} 
    ul li  {display: none; x:inline-block; width: 246px; height: 134px; margin: 0px 5px 5px 0px; 
       border: 1px solid #000; cursor: pointer; 
     background-image: url(http://i.stack.imgur.com/8FjvI.jpg); 
     background-repeat: no-repeat; 
     opacity: 0.5; 
     xbackground-position: -9px -79px; 

    } 
    ul li:first-child{ 
     display: inline-block; 

    } 
    ul li:hover{ 
     opacity:1; 
    } 
    .thumb0{ 
     background-position: -9px -79px; 

    } 
</style> 
<script> 
alto = 134; 
ancho = 246; 
x= -9; 
y= -79; 
i=-1; 
for (mx=0; mx < 4; mx++){  
    for (my=0; my < 4; my++){ 
     i++; 
     jQuery('ul li').eq(i).css('background-position-x','-' + ((my * ancho) + 25) + 'px'); 
     jQuery('ul li').eq(i).css('background-position-y','-' + ((mx * alto) + y*-1) + 'px');   
    } 
} 
clok = 0; 
ani = function(){ 
clearTimeout(clok); 
    d= jQuery('ul li:visible').next(); 
    if (d.length !=0){ 
     jQuery('ul li:visible').hide(); 
     jQuery(d).show(); 
    } else { 
     jQuery('ul li').hide(); 
     jQuery('ul li:first-child').show(); 
    } 
    setTimeout(function(){ani()},700); 
} 
ani(); 
</script> 
</head> 
<body> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 

</body> 
</html>

http://jsfiddle.net/chepe263/3Zc4g/17/

을 변화시킬 수

출처

2013-06-11 20:27:48 chepe263

난 당신이 썸네일과 함께 하나의 이미지를 사용하는 이유를 모르겠습니다. 축소 이미지를 이미지에서 분리하여 사용할 수 없습니까?

<UL> 요소에 단일 이미지를 배경으로 배치 할 수있는 jsfiddle을 만든 경우 <li> 요소에 변경하려는 이미지의 호버 동작이 포함됩니다.

http://jsfiddle.net/86xCH/7/

출처

2013-06-11 19:22:23

jquery preview 다중 다중 이미지 thumbnail

답변

관련 문제