jquery는 페이지 오른쪽 하단에 고정된 회전 링 메뉴의 특수 효과 코드를 구현합니다. 사용자가 기본 메뉴 버튼을 클릭하면 하위 메뉴 항목이 페이지로 회전합니다. 링을 만들고 animate.css를 사용하여 애니메이션 효과를 만듭니다.
렌더링은 다음과 같습니다.
html 코드:
<div class="htmleaf-container"> <div id='ss_menu'> <div> <i class="fa fa-qq"></i> </div> <div> <i class="fa fa-weibo"></i> </div> <div> <i class="fa fa-weixin"></i> </div> <div> <i class="fa fa-renren"></i> </div> <div class='menu'> <div class='share' id='ss_toggle' data-rot=''> <div class='circle'></div> <div class='bar'></div> </div> </div> </div> </div>
js 코드:
$(document).ready(function (ev) { var toggle = $('#ss_toggle'); var menu = $('#ss_menu'); var rot; $('#ss_toggle').on('click', function (ev) { rot = parseInt($(this).data('rot')) - 180; menu.css('transform', 'rotate(' + rot + 'deg)'); menu.css('webkitTransform', 'rotate(' + rot + 'deg)'); if (rot / 180 % 2 == 0) { toggle.parent().addClass('ss_active'); toggle.addClass('close'); } else { toggle.parent().removeClass('ss_active'); toggle.removeClass('close'); } $(this).data('rot', rot); }); menu.on('transitionend webkitTransitionEnd oTransitionEnd', function () { if (rot / 180 % 2 == 0) { $('#ss_menu div i').addClass('ss_animate'); } else { $('#ss_menu div i').removeClass('ss_animate'); } }); });