如何以循环背景颜色上哈弗使用jQuery [英] How to Cycle Through Background Colors on Hover with jQuery
问题描述
我试图让通过背景颜色循环使用鼠标悬停时的div。我已经想通了如何使背景色切换到一组值的颜色值上的mouseenter ，但不知道如何让它继续下去。
如何让我的背景颜色保持当鼠标悬停在元素变化（并停止一旦我打探出）？
下面是什么，我至今一个完全工作小提琴： FIDDLE
我的HTML：
＆LT;身体GT;
＆所述;格ID =coloredDiv数据索引= - 1＆GT;＆下; / DIV＆GT;
＆LT; /身体GT;
我的CSS：
#coloredDiv {
宽度：200像素;
高度：200像素;
边框：1px的固体＃888;
}#coloredDiv：悬停{
光标：指针;
}
我的jQuery的：
VAR颜色= ['#eeeeee，＃00FF00，＃FF0000，＃000000];$（文件）。就绪（函数（）{
$ colorDiv = $（'＃coloredDiv'）;
LN = colors.length;
$（'＃coloredDiv'）。的mouseenter（函数（）{
变种I = $ colorDiv.data（指数）;
++我;
如果（ⅰ＆GT = LN）I = 0;
$ colorDiv.css（{
背景色：颜色[I]
}）;
$ colorDiv.data（指数，我）;
}）;
}）;
使用 Array.shift 和的Array.push 使循环发生
小提琴
VAR计数器= 0;
VAR颜色= [
#eeeeee
＃00FF00
＃FF0000
＃000000];变量$ DIV = $（'＃coloredDiv'）;$（'＃coloredDiv'）。的mouseenter（函数（）{
变种颜色= colors.shift（）; //获取顶部颜色
colors.push（颜色）; //它推到年底为周期重复。
$ div.css（{
背景色：颜色
}）}）;
有关循环重复悬停： -
VAR计数器= 0;
VAR颜色= [
#eeeeee
＃00FF00
＃FF0000
＃000000];变量$ DIV = $（'＃coloredDiv'）;
VAR区间;
$（'＃coloredDiv'）。的mouseenter（函数（）{
间隔= window.setInterval（changeColor，1000）; //设置1秒的时间间隔图像改变而徘徊。}）。鼠标离开（函数（）{
window.clearInterval（间隔）; //清除鼠标移开的时间间隔。
}）;功能changeColor（）{
变种颜色= colors.shift（）;
colors.push（颜色）;
$ div.css（{
背景色：颜色
}）;}
小提琴
I'm trying to make a div that cycles through background colors when hovered over with the mouse. I've figured out how to make the background color switch to a color value from a set of values on mouseenter, but not how to make it keep going.
How do I make the background color keep changing while the mouse is hovered over the element (and stop once I've moused out)?
Here's a fully working fiddle of what I have so far: FIDDLE
My HTML:
<body>
<div id="coloredDiv" data-index="-1"></div>
</body>
My CSS:
#coloredDiv {
width:200px;
height:200px;
border:1px solid #888;
}
#coloredDiv:hover {
cursor:pointer;
}
My jQuery:
var colors = ['#eeeeee', "#00ff00", "#ff0000", "#000000"];
$(document).ready(function () {
$colorDiv = $('#coloredDiv');
ln = colors.length;
$('#coloredDiv').mouseenter( function () {
var i = $colorDiv.data("index");
++i;
if (i >= ln) i = 0;
$colorDiv.css({
'background-color': colors[i]
});
$colorDiv.data("index", i);
});
});
Use Array.shift and Array.push to make cycle happen
Fiddle
var counter = 0;
var colors = [
"#eeeeee",
"#00ff00",
"#ff0000",
"#000000"];
var $div = $('#coloredDiv');
$('#coloredDiv').mouseenter(function () {
var color = colors.shift(); //Get the top color
colors.push(color); //push it to the end for the cycle to repeat.
$div.css({
"background-color": color
})
});
For cycle to repeat on hover:-
var counter = 0;
var colors = [
"#eeeeee",
"#00ff00",
"#ff0000",
"#000000"];
var $div = $('#coloredDiv');
var interval;
$('#coloredDiv').mouseenter(function () {
interval = window.setInterval(changeColor, 1000); //set the interval of 1 sec for image to change while hovered.
}).mouseleave(function () {
window.clearInterval(interval); //clear the interval on mouseOut.
});
function changeColor() {
var color = colors.shift();
colors.push(color);
$div.css({
"background-color": color
});
}
Fiddle
这篇关于如何以循环背景颜色上哈弗使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
