创建无线电圆形旋转按钮css和jquery?

前端之家收集整理的这篇文章主要介绍了创建无线电圆形旋转按钮css和jquery?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了这个脚本:你可以在这里看到 Live Demo

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

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

例如,当鼠标点击195度后鼠标指针返回右侧部分或鼠标点击340度后鼠标指针返回左侧部分并在此脚本中我需要3度0,90和180

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

解决方法

我创造了一些可以帮助你的东西……
只是,下次你应该提供至少你最好的尝试,以获得一些答案.

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

});
原文链接:https://www.f2er.com/css/217966.html

猜你在找的CSS相关文章