JS框架_(JQuery.js)圆形多选菜单选项

百度云盘　　传送门　　密码：zb1c

圆形多选菜单选项效果：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jQuery圆形多选菜单选项DEMO演示</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>



<div class='selector'>
  <ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'>1</label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'>2</label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'>3</label>
    </li>
    <li>
      <input id='4' type='checkbox'>
      <label for='4'>4</label>
    </li>
    <li>
      <input id='5' type='checkbox'>
      <label for='5'>5</label>
    </li>
    <li>
      <input id='6' type='checkbox'>
      <label for='6'>6</label>
    </li>
    <li>
      <input id='7' type='checkbox'>
      <label for='7'>7</label>
    </li>
    <li>
      <input id='8' type='checkbox'>
      <label for='8'>8</label>
    </li>
  </ul>
  <button>Gary</button>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script  src="js/index.js"></script>
</body>
</html>

index.html

var angleStart = -360;


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


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

index.js

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(#eee, #ccc);
  overflow: hidden;
}




.selector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.selector, .selector button {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #428bca;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}

.selector button:hover {
  background: #3071a9;
}

.selector button:focus {
  outline: none;
}

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

.selector li input {
  display: none;
}

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label:hover {
  background: #f0f0f0;
}

.selector li input:checked + label {
  background: #5cb85c;
  color: white;
}

.selector li input:checked + label:hover {
  background: #449d44;
}

.selector.open li input + label {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

style.css

实现过程

CSS

选择按钮

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #428bca;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}

cursor 属性规定要显示的光标的类型（pointer 光标呈现为指示链接的指针）

选择标签

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

transition-property 属性规定应用过渡效果的 CSS 属性的名称

　　all 所有属性都将获得过渡效果

　　0.8s 属性过渡时间

　　ease-in-out 规定以慢速开始和结束的过渡效果

鼠标触碰按钮时变化颜色

.selector button:hover {
  background: #3071a9;
}

子标签初始化旋转效果

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

鼠标触碰子标签时显示的颜色

.selector li input + label:hover {
  background: #f0f0f0;
}

子标签的颜色

.selector li input:checked + label:hover {
  background: #449d44;
}

子标签文字的颜色

.selector li input:checked + label {
  background: #5cb85c;
  color: white;
}

设置标签旋转度数

var angleStart = -360;

多选菜单旋转动画

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

duration ：返回动画当前时间长度

显示/影藏多选菜单

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

find() 方法获得当前元素集合中每个元素的后代（获得全部的li标签）

hasClass() 方法检查被选元素是否包含指定的 class

　　　(找到了子标签旋转出来，没找到子标签旋转回去)

点击按钮调用toggleOptions(s)函数

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

parent() 获得当前匹配元素集合中每个元素　(获得元素全部标签)

设置动作时间

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

DOM

<div class='selector'>
  <ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'>1</label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'>2</label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'>3</label>
    </li>
    <li>
      <input id='4' type='checkbox'>
      <label for='4'>4</label>
    </li>
    <li>
      <input id='5' type='checkbox'>
      <label for='5'>5</label>
    </li>
    <li>
      <input id='6' type='checkbox'>
      <label for='6'>6</label>
    </li>
    <li>
      <input id='7' type='checkbox'>
      <label for='7'>7</label>
    </li>
    <li>
      <input id='8' type='checkbox'>
      <label for='8'>8</label>
    </li>
  </ul>
  <button>Gary</button>
</div>

posted @ 2018-08-03 12:16 Cynical丶Gary 阅读(940) 评论(0) 编辑收藏举报

刷新页面返回顶部

Cynical丶Gary

木叶飞舞之处，火亦生生不息~

JS框架_(JQuery.js)圆形多选菜单选项

公告