Javascript 将其应用于函数的HSL随机颜色
我对jquery真的很陌生,我正在尝试让它使得为单词blink生成的颜色每次都是不同的颜色,但我不知道如何做到这一点。请查看下面的代码或查看JSFIDLEJavascript 将其应用于函数的HSL随机颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对jquery真的很陌生,我正在尝试让它使得为单词blink生成的颜色每次都是不同的颜色,但我不知道如何做到这一点。请查看下面的代码或查看JSFIDLE html{ 身高:100%; 溢出:隐藏; } p{ 字体系列:“Helvetica”; 字体大小:10px; 浮动:左; 利润率:10px; } .盒子{ 宽度:10px; 高度:10px; 浮动:左; 利润率:10px; } .盘旋{ 颜色:蓝色; -webkit动画名称:blinker; -webkit动画持续时间:1s; -web
html{
身高:100%;
溢出:隐藏;
}
p{
字体系列:“Helvetica”;
字体大小:10px;
浮动:左;
利润率:10px;
}
.盒子{
宽度:10px;
高度:10px;
浮动:左;
利润率:10px;
}
.盘旋{
颜色:蓝色;
-webkit动画名称:blinker;
-webkit动画持续时间:1s;
-webkit动画计时功能:线性;
-webkit动画迭代计数:无限;
-moz动画名称:闪烁器;
-moz动画持续时间:1s;
-moz动画计时功能:线性;
-moz动画迭代次数:无限;
动画名称:闪烁;
动画持续时间:1s;
动画计时功能:线性;
动画迭代次数:无限;
}
@-moz关键帧闪烁{
0%{不透明度:1.0;}
50%{不透明度:0.0;}
100%{不透明度:1.0;}
}
@-webkit关键帧闪烁器{
0%{不透明度:1.0;}
50%{不透明度:0.0;}
100%{不透明度:1.0;}
}
@关键帧闪烁器{
0%{不透明度:1.0;}
50%{不透明度:0.0;}
100%{不透明度:1.0;}
}
var g=0;
$(函数(){
对于(var i=0;i您错过了after.addClass()
awesome:)非常感谢。快速qn,您还添加了这个g=(g+1)%360;这有什么作用?thanksIt每次元素悬停时,只会在g
的值上添加1。如果%360
色调的最大值(从0到360),则%360
会将g
重置为零如果你将足够多的元素悬停在小提琴上,你会看到颜色从红色慢慢变为绿色,依此类推。。。
<!doctype html>
<html>
<head>
<style>
html{
height:100%;
overflow:hidden;
}
p{
font-family: "Helvetica";
font-size: 10px;
float:left;
margin:10px;
}
.box {
width: 10px;
height: 10px;
float:left;
margin:10px;
}
.hovered{
color: blue;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var g = 0;
$(function() {
for(var i=0; i<1000; i++){
$("body").append("<p>blink</p>");
}
$("p").hover(function() {
//hovered on
$(this).addClass("hovered")({
"color":"hsl(" + g + ",100%,50%)"
});
});
});
</script>
</head>
<body>
</body>
</html>
$(this).addClass("hovered").css({
"color": "hsl(" + g + ",100%,50%)"
});