创建单选循环旋转按钮css和jquery

Question

我创建了这个脚本：你可以在这里看到实时演示

但我的问题是：我有3个部分，你可以在图像中看到

我希望指针停留并指向接近点击的部分

例如，当鼠标点击195度时，所以在将鼠标指针放回右侧部分之后，或者当鼠标点击340度时，在将鼠标光标指针放回左侧部分之后，在这个脚本中，我只需要3度0、90和180

其他度数点击返回指针接近这个度数

Answer 1

我创建了一些可能对您有所帮助的东西
_{只是，下次你应该至少尽你最大的努力才能得到一些答案}

实时演示

 <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,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,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,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, 90%, '+ 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, 90%, '+ s2.p +'%, 1)'});
  $sl.css({transition:'0.3s',transform:'rotate('+ s2.d +'deg)'});
  setTimeout(function(){
       $sl.css({transition:'0s'}); 
       $pa.text(s2.p);    
  },210);
});
});