Jak mohu využít circlular nabídka rolovací

hlasů
0

Jsem budování ionic2 aplikace, mám nabídku podobnou této codepen . Mám sestavu do kruhové animaci k němu. Jak vytvořit tento kruhový rolovací menu v kruhové módě. Děkuji

HTML

<div class='selector'>
<ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'>Option 1</label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'>Option 2</label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'>Option 3</label>
    </li>
  </ul>
  <button>Click here</button>
</div>

JS

var angleStart = -360;
// jquery rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
               .css({ transform: 'rotate('+now+'deg)' })
               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
        }, duration: 0
    });
}

// show / hide the options
function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
    for(var i=0; i<li.length; i++) {
        var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
        $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
    }
}

$('.selector button').click(function(e) {
    toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.selector'); }, 100);

Sledujte codepen odkaz.

Položena 19/12/2016 v 02:08
uživatelem
V jiných jazycích...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more