创建单选圆形旋转按钮css和jquery？ [关闭]

Question

我创建了这个脚本：你可以在这里看到Live Demo

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

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

例如，当鼠标单击 195 度后，将鼠标指针移回右侧部分或将鼠标光标移回左侧部分后鼠标单击 340 度时，在此脚本中，我只需要 3 度 0 ， 90和180

和其他度数点击返回指针到这个度数的附近

Answer 1

我创造了一些可能对你有帮助的东西......
_{只是，下次你应该至少提供你最好的尝试以获得一些答案。}

LIVE DEMO

 <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);
});

});