Курсор выбора цвета - PullRequest
Новая
       30

Курсор выбора цвета

0 голосов
/ 08 октября 2018

Итак, я создал Цветовое Колесо Оттенка, которое выглядит ниже:

image

What i want to achieve is a little white circle on top of this, which changes position when you hover (or drag) your cursor over the circle. Any ideas?

image

for (var i=0; i<360; i++) {
	var color = document.createElement("span")
	color.setAttribute("id", "d" + i)
	color.style.backgroundColor = "hsl(" + i + ", 100%, 50%)"
	color.style.msTransform = "rotate(" + i + "deg)"
	color.style.webkitTransform = "rotate(" + i + "deg)"
	color.style.MozTransform = "rotate(" + i + "deg)"
	color.style.OTransform = "rotate(" + i + "deg)"
	color.style.transform = "rotate(" + i + "deg)"
	document.getElementById('colorwheel').appendChild(color)
};
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(#111, #222);
  background: -webkit-linear-gradient(#111, #222);
  background: -moz-linear-gradient(#111, #222);
  background: -o-linear-gradient(#111, #222);
}

#colorwheel {
  margin: 20px auto;
  position: relative;
  width: 640px;
  height: 640px;
}

span {
  cursor: wait;
  position: absolute;
  top: 310px;
  left: 420px;
  width: 15px;
  height: 20px;
  -ms-transform-origin: -100px 50%;
  -webkit-transform-origin: -100px 50%;
  -moz-transform-origin: -100px 50%;
  -o-transform-origin: -100px 50%;
  transform-origin: -100px 50%;
  opacity: .1;
}

span:hover, span:active {
  opacity: 1;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorwheel"></div>
...