jquery从多拇指图像预览_Jquery

jquery从多拇指图像预览

jquery

jquery从多拇指图像预览,jquery,Jquery,有没有一种方法可以像youtube一样，将多个拇指放在一张图片中进行鼠标悬停的图片预览。见下图。我知道法线t是通过旋转许多图像来完成的，但在我的示例中，我有一张图像有很多拇指我不知道为什么要使用带有缩略图的单一图像。你不能从图像中拼接缩略图并使用它们吗我制作了一个JSFIDLE，您可以将单个图像作为背景放置在元素中，然后元素将包含您想要更改为的任何图像的悬停动作不确定你想要什么。为缩略图提供不同的图像可能更容易。如果你有一个大的形象，你可以使用css精灵想法是有几个李元素，把大图像

有没有一种方法可以像youtube一样，将多个拇指放在一张图片中进行鼠标悬停的图片预览。见下图。我知道法线t是通过旋转许多图像来完成的，但在我的示例中，我有一张图像有很多拇指

我不知道为什么要使用带有缩略图的单一图像。你不能从图像中拼接缩略图并使用它们吗

我制作了一个JSFIDLE，您可以将单个图像作为背景放置在

元素中，然后

元素将包含您想要更改为的任何图像的悬停动作

不确定你想要什么。为缩略图提供不同的图像可能更容易。如果你有一个大的形象，你可以使用css精灵

想法是有几个李元素，把大图像作为背景，然后改变每个李背景的位置

<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>


ul{填充：0px；宽度：640px；}
ul li{显示：无；x：内联块；宽度：246px；高度：134px；边距：0px 5px 5px 0px；
边框：1px实心#000；光标：指针；
背景图片：url(http://i.stack.imgur.com/8FjvI.jpg);
背景重复：无重复；
不透明度：0.5；
xbackground位置：-9px-79px；
}
李：第一个孩子{
显示：内联块；
}
ulli：悬停{
不透明度：1；
}
.0{
背景位置：-9px-79px；
}
alto=134；
ancho=246；
x=-9；
y=-79；
i=-1；
对于（mx=0；mx<4；mx++）{
对于（my=0；my<4；my++）{
i++；
jQuery（'ulli'）.eq（i）.css（'background-position-x'，'-'+（（my*ancho）+25）+'px'）；
jQuery（'ulli'）.eq（i）.css（'background-position-y'，'-'+（（mx*alto）+y*-1）+'px'）；
}
}
clok=0；
ani=函数（）{
清除超时（clok）；
d=jQuery（'ulli:visible'）.next（）；
如果（d.长度！=0）{
jQuery（'ulli:visible'）.hide（）；
jQuery（d.show（）；
}否则{
jQuery（'ul li'）.hide（）；
jQuery（'ul li:first child'）.show（）；
}
setTimeout（函数（）{ani（）}，700）；
}
ani（）；