0

有没有一种方法可以使鼠标悬停在图像预览上，例如放置在单个图像中的许多拇指的 youtube。请参见下图。我知道通常是通过旋转许多图像来完成的，但是在我的示例中，我有一张带有很多拇指的图像。

在此处输入图像描述

4

2 回答 2

1

不知道你想要什么。为缩略图设置不同的图像可能会更容易。如果你有一个大图像，你可以使用 css sprites Css-Tricks

这个想法是有几个 li 元素并将大图像作为背景，然后更改每个 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-11T20:27:48.410 回答
0

我不确定您为什么要使用带有缩略图的单个图像。你不能拼接图像中的缩略图并使用它们吗？

我制作了一个 jsfiddle，您可以在其中将该单个图像作为背景放置在<UL>元素中，然后<li>元素将包含您想要更改为的任何图像的悬停动作。

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

于 2013-06-11T19:22:23.620 回答