jQuery：遍歷元素並移動CSS Sprite的背景位置

我想要做的是創建一個樣本列表，當鼠標懸停時，顯示一個正在被徘徊的顏色預覽。我使用CSS精靈來傳遞色板和預覽。我有它的工作，但我覺得有一個更有效的方式來提供相關的jQuery。我正在尋求幫助來尋找更優雅的解決方案。jQuery：遍歷元素並移動CSS Sprite的背景位置

下面是我的HTML：

<div class="chip-preview"></div> 
<div class="style-swatches"> 
<ul> 
    <li class="c1"></li> 
    <li class="c2"></li> 
    <li class="c3"></li> 
    <li class="c4"></li> 
    <li class="c5"></li> 
    <li class="c6"></li> 
    <li class="c7"></li> 
    <li class="c8"></li> 
    <li class="c9"></li> 
    <li class="c10"></li> 
    <li class="c11"></li> 
    <li class="c12"></li> 
</ul> 
</div>

和我相關的jQuery：

$('.c1').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-195px 0"); 
}); 
$('.c2').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-390px 0"); 
}); 
$('.c3').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-585px 0"); 
}); 
$('.c4').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-780px 0"); 
}); 
$('.c5').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-975px 0"); 
}); 
$('.c6').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1170px 0"); 
}); 
$('.c7').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1365px 0"); 
}); 
$('.c8').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1560px 0"); 
}); 
$('.c9').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1755px 0"); 
}); 
$('.c10').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1950px 0"); 
}); 
$('.c11').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-2145px 0"); 
}); 
$('.c12').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-2340px 0"); 
});

類CN的每個增量移動背景-195px的水平。想法如何使這更好？

來源

2013-08-05 Brett D

謝謝大家的幫忙。我已經標記了我想用作答案的那個。 –

試試這個：

var xPosition = -195; 
$(".style-swatches li").each(function(){ 
    $(this).hover(function(){ 
     $(this).parents().find('.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0"); 
    }); 
});

Fiddle

來源

2013-08-05 13:23:36

你們很快！我試過你的例子，但它只移動一次，並且-2000px左右。 http://jsfiddle.net/zPtr6/ –

這是舊的..我修改了我的帖子，請檢查修改後的代碼.. –

小提琴也添加 –

嘗試

$('.c1, .c2, .c3').hover(function() { 
    var $this = $(this), pos = $this.attr('class').match(/\bc(\d+)\b/)[1]; 
    $(this).parents().find('.chip-preview').css('background-position','-' + (pos * 195) + 'px 0'); 
});

來源

2013-08-05 13:26:29

也許這樣的事情？（非常粗糙，請仔細使用！）

$("[class^='c']").hover(function() { 
    var classname = $(this).attr('class'); 
    var factor = substring(1); 
    var position = Number(factor) * -195; 
    position = position + "px 0"; 
    $(this).parents().find('.chip-preview').css("background-position", "-195px 0"); 
});

來源

2013-08-05 13:33:12 nthapa13

jQuery：遍歷元素並移動CSS Sprite的背景位置

回答

相關問題