1

我希望我的图像精灵根据用户所在的页面显示我在图像文件中的另一个子图像。我可以在 javascript 中识别页面并正确显示我的 css sprite，当前在无序列表中的 li 标签内，其中也包括锚标签。

这是我的css的一个例子

<style type="text/css">
#theList{position:relative;}
#theList li{margin:0;padding:0;list-style:none;position:absolute;}
#theList li, #navlist a{height:40px;display:block;}


#one{left:-10px;top:-55px;width:200px;}
#one{background:url('../../images/dashboardNavigationMasterSprite.jpg') 0px 0px;}
#one a:hover{background: url('../../images/dashboardNavigationMasterSprite.jpg') 0px -40px;}

#two{left:193px;top:-55px;width:200px;}
#two{background:url('../../images/dashboardNavigationMasterSprite.jpg') -202px 0px;}
#two a:hover{background: url('../../images/dashboardNavigationMasterSprite.jpg') -202px -40px;}
</style>

这是我的html

<ul id="theList">
<li id="one"><a href="http://bert2007sql64/sites/budgettool/FIDs/Pages/Dashboards/Dashboard_Exec_Home.aspx"></a></li>
  <li id="two"><a href="http://bert2007sql64/sites/budgettool/FIDs/Pages/Dashboards/Dashboard_Budget_Controls.aspx"></a></li>

基本上我想知道的是如何使用 javascript 或 jquery 访问和更改 xpos 和 ypos 属性。我试图操纵的 xpos 和 ypos 值是下面一行中列出的值

#one{background:url('../../images/dashboardNavigationMasterSprite.jpg') 0px 0px;}

非常感谢，

4

3 回答 3

1

扩展您的样式，使相同标签上的不同类（或其他一些 CSS-selector-criteria）指向精灵中的不同位置。然后在 Javascript 中，更改标签的类以获取不同的图像。

于 2012-06-28T20:15:21.040 回答
1

您可以像这样以编程方式更改它（使用 JQuery）

$('#id').css( {backgroundPosition: "0 0"} )

这是一个很好的例子

您可以尝试的东西（未经测试）：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#one').css( {backgroundPosition: "20px 10px"} )
    });
</script>
于 2012-06-28T20:15:32.423 回答
1

这应该适用于您使用 jQuery：

$('#one').css( 'backgroundPosition', '0px 0px' );
于 2012-06-28T20:18:32.590 回答