Question

我希望默认情况下在div中显示我的精灵的一部分，然后在div下方有一个文本菜单，当点击不同的链接时，显示的精灵部分会发生变化。

这是我到目前为止的地方，并且已经将我的精灵全部展示出来：

INDEX

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<i class="sprite sprite-caramel"></i>
<i class="sprite sprite-chocolate"></i>
<i class="sprite sprite-empty"></i>
<i class="sprite sprite-strawberry"></i>
<i class="sprite sprite-vanilla"></i>
</body>

</html>

CSS

.sprite {
    background-image: url(sprite1.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-caramel {
    width: 176px;
    height: 250px;
    background-position: 0 0;
}

.sprite-chocolate {
    width: 176px;
    height: 250px;
    background-position: -176px 0;
}

.sprite-empty {
    width: 176px;
    height: 250px;
    background-position: -352px 0;
}

.sprite-strawberry {
    width: 176px;
    height: 250px;
    background-position: -528px 0;
}

.sprite-vanilla {
    width: 176px;
    height: 250px;
    background-position: -704px 0;
}

我想要做的是在div中默认显示“空”，然后在div下面有“chocolate”“vanilla”“strawberry”等文本链接。点击链接时，精灵位置会然后更改以反映所点击链接的图像。

在使用Google搜索时，我似乎只能在悬停时找到图像替换...

我是精灵100％新手，直到现在才使用它们。

Answer 1

好像你需要Javascript来完成工作。

<强> HTML

<body> 
   <div id="tumbler" class="sprite sprite-empty"></div>
   <a class="flavor" data-flavor="caramel" href="#">Caramel</a>
   <a class="flavor" data-flavor="chocolate" href="#">Chocolate</a>
   <a class="flavor" data-flavor="empty" href="#">Empty</a>
   <a class="flavor" data-flavor="strawberry" href="#">Strawberry</a>
   <a class="flavor" data-flavor="vanilla" href="#">Vanilla</a>

<强> CSS

 .sprite {
       background-image: url(http://puu.sh/3orSM.png);
       background-repeat: no-repeat;
       display: block;
       width: 176px;
       height: 250px;
   }
   .sprite-caramel {
       background-position: 0 0;
   }
   .sprite-chocolate {
       background-position: -176px 0;
   }
   .sprite-empty {
       background-position: -352px 0;
   }
   .sprite-strawberry {
       background-position: -528px 0;
   }
   .sprite-vanilla {
       background-position: -704px 0;
   }

Javascript - 需要jQuery

   jQuery(document).on("ready", function() { 
      jQuery('.flavor').bind('click', function(e) {
         jQuery('#tumbler').attr('class', 'sprite sprite-' + jQuery(this).data('flavor'));
            e.stopPropagation();
         });
    });

<强>示范

当然还有demo。

通过链接替换精灵图像

1 个答案: