0

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

这是我到目前为止的位置，并且已经让我的精灵全部显示如下：

指数

<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 下有带有“巧克力”“香草”“草莓”等的文本链接。单击链接时，精灵位置将更改为反映点击的链接的图像。

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

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

4

1 回答 1

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();
         });
    });

示范

当然还有演示。

于 2013-06-26T02:25:36.540 回答