是否有可能改变我的css精灵显示javascript的子图像？

我希望我的图像精灵根据用户所在的页面显示我的图像文件中的另一个子图像。我可以在javascript中识别页面，并让我的css精灵正确显示，当前位于无标列表中的li标签中，其中也包含锚标签。是否有可能改变我的css精灵显示javascript的子图像？

这里是我的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>

基本上我想知道是我如何可以访问和修改XPOS和ypos使用JavaScript属性或jQuery可能。该XPOS和ypos值我试图操纵低于

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

Thankyaverymuch该行列出的，

来源

2012-06-28 John

您可以（使用JQuery）编程修改它像这样

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

Here你有一个很好的例子

东西（未测试），你可以尝试：

<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-28 20:15:32 jperelli

谢谢，我会试试 – John

这个答案暗示只有一个图像URL属性，并且每个li实例的位置都会移位。应该不需要重复背景图片网址。然后，您的CSS可以包含正常状态下的ID列表以及处于悬停状态的相同列表。 – mtf

MTF我相信我明白你的意思，所以有三个html无序列表，然后从那里处理visibilty？ – John

展开你的造型，使目前存在的类（或其他一些CSS选择器的标准）的相同的标签指向你的精灵中的不同位置。然后在Javascript中，更改标签的类以获取不同的图像。

来源

2012-06-28 20:15:21 n8wrl

这应该为你使用jQuery：

$('#one').css('backgroundPosition', '0px 0px');

来源

2012-06-28 20:18:32 j08691

是否有可能改变我的css精灵显示javascript的子图像？

回答

相关问题