我创建了这个脚本：你可以在这里看到
Live Demo
但我的问题是：
我有3部分你可以在图像中看到
我希望指针停留并指向接近点击的部分
例如,当鼠标点击195度后鼠标指针返回右侧部分或鼠标点击340度后鼠标指针返回左侧部分并在此脚本中我需要3度0,90和180
和其他度数点击指向这个度数附近的指针
解决方法
我创造了一些可以帮助你的东西……
只是,下次你应该提供至少你最好的尝试,以获得一些答案.
只是,下次你应该提供至少你最好的尝试,以获得一些答案.
<div class="slideButton"> <div class="slider"></div> <div class="pointer"></div> <div class="panel"></div> </div>
.slideButton{
background-color: hsla(190,90%,0%,1);
background-image:url(http://i.imgur.com/FTt4CCI.png);
width:101px;
height:101px;
position:relative;
border-radius:56px;
overflow:hidden;
cursor:pointer;
Box-shadow: inset 0 0 0 1px rgba(0,0.2);
}
.slider{
position:absolute;
background:url(http://i.imgur.com/tQCNIgo.png);
width:101px;
height:101px;
transition: 0s;
-webkit-transition: 0s;
}
.pointer{
background:url(http://i.imgur.com/SLzrzp6.png);
width:101px;
height:101px;
position:absolute;
border-radius:50px;
transition: 1.2s;
-webkit-transition: 1.2s;
}
.panel{
font-family:Arial,Helvetica,sans-serif;
font-size:9px;
text-align:center;
width:26px;
height:26px;
top:36px;
left:36px;
border-radius:30px;
position:absolute;
line-height:28px;
color:#39a;
background:#444;
Box-shadow:inset 0 1px 6px rgba(0,0.8);
border:1px solid #aaa;
transition: 1.2s;
-webkit-transition: 1.2s;
}
.slideButton:hover > .panel{
color:#6ef;
transition: 0.2s;
background:#445;
Box-shadow:inset 0 1px 6px rgba(0,0.4);
text-shadow: 0 0 5px #fff;
}
$('.slideButton').each(function(){
var $el = $(this),$sl = $el.find('.slider'),$po = $el.find('.pointer'),$pa = $el.find('.panel'),rad = $el.width()/2,elP = $el.offset(),elPos = { x:elP.left,y:elP.top },s = {d:0,p:0},s2 = {d:s.d,p:s.p};
function d(e){
var mPos = {x: e.pageX-elPos.x,y: e.pageY-elPos.y};
var getatan = Math.atan2(mPos.x-rad,mPos.y-rad);
s.d = -getatan/(Math.PI/180) + 180;
s.p = Math.round(s.d*100/360);
$pa.text(s.p);
}
$el.mousemove(function(e){
d(e);
$el.css({backgroundColor: 'hsla(190,'+ s.p +'%,1)'});
$sl.css({transform:'rotate('+ s.d +'deg)'});
}).click(function(){
s2 = {d:s.d,p:s.p};
$po.css({transform:'rotate('+ s.d +'deg)'});
}).mouseleave(function(){
$el.css({backgroundColor: 'hsla(190,'+ s2.p +'%,1)'});
$sl.css({transition:'0.3s',transform:'rotate('+ s2.d +'deg)'});
setTimeout(function(){
$sl.css({transition:'0s'});
$pa.text(s2.p);
},210);
});
});
