创建无线电圆形旋转按钮css和jquery？ [英] Creating radio circular rotating button css and jquery?

问题描述

我创建了此脚本：您可以在此处查看 Live Demo

I create this script : you can see here Live Demo

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

but my problem is this : I have 3 section you can see in images

我想要指针停留并指向section接近点击

I want pointer stay and point to section that near clicked

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

for example when mouse clicked on 195 degree so after leave mouse pointer back to right side section or when mouse clicked on 340 degree after leaving the mouse cursur pointer back to left side section and in this script I need just 3 degree 0 , 90 and 180

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

and other degrees clicked back pointer to near of this degrees

推荐答案

我创建了一些可能会帮助你的东西...

_{下次你应该提供至少最好的尝试以获得一些答案。}

I created something that might help you...
_{Just, next time you should provide at least your best try in order to get some answers.}

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

});

这篇关于创建无线电圆形旋转按钮css和jquery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！