jQuery的預覽從多個拇指圖像

有沒有一種方法，我可以使鼠標懸停在圖像預覽像許多拇指放在單個圖像youtube.See圖像下面。我知道通常是通過旋轉很多圖像來完成的，但在我的示例中，我有許多拇指的這一個圖像。jQuery的預覽從多個拇指圖像

enter image description here

2013-06-11 django

不知道你想要什麼。爲縮略圖製作不同的圖像可能會更容易。如果你有一個大的圖像，你可以使用CSS精靈 Css-Tricks

的想法是有幾個li元素，並把大圖作爲背景，然後更改每個李後臺位置

<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

我不知道你爲什麼會使用一個圖像的縮略圖。難道你不能拼接圖像中的縮略圖並使用它們嗎？

我製作了一個jsfiddle，您可以在該元素中放置該圖像作爲背景，然後<li>元素將包含您希望更改爲圖像的懸停操作。

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

來源

2013-06-11 19:22:23

jQuery的預覽從多個拇指圖像

回答

相關問題