html滑动仿悬浮球菜单效果的实现

css样式

1. html,body{
2.         width: 100%;
3.         height: 100%;
4.         margin: 0;padding: 0;
5. }
7. /*导航图标*/
8. .NMH-g-navicon{
9.         position: fixed;
10.         top: 40%;
11.         right: 020px;
12.         width: 100px;
13.         height: 100px;
14. }
15. .NMH-g-navicon.Jnmh-onleft{
16.         right: auto;
17.         left: 020px;
18. }
19. /*导航图标logo按钮*/
20. .NMH-g-navicon .Jnmh-btnlogo{
21.         position: absolute;
22.         display: block;
23.         width: 100px;
24.         height: 100px;
25.         top: 50%;
26.         right: 0;
27.         margin-top: -50px;
28.         border: 0;
29.         background: url(img/icon_128.png) no-repeat center center;
30.     background-size: 95% 95%;
31.     border: 1px solid rgba(0, 0, 0, 0.1);
32.     box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 10px 0px;
33.         outline: none;
34.         border-radius: 50%;
35.         z-index: 1;
36. }
37. .NMH-g-navicon .Jnmh-btnlogohover{
38.         position: absolute;
39.         display: block;
40.         width: 100px;
41.         height: 100px;
42.         top: 50%;
43.         right: 0;
44.         margin: 0;padding: 0;
45.         margin-top: -50px;
46.         border: 0;
47.         overflow: hidden;
48.         /*background-color: red;*/
49. }
51. /*导航图标logo按钮-鼠标经过*/
52. .NMH-g-navicon.Jnmh-open .Jnmh-btnlogohover{
53.         margin-top: -150px;       
54.         width: 200px;
55.         height: 300px;
56.         border-radius: 150px 0 0 150px;
57. }
58. .NMH-g-navicon.Jnmh-onleft .Jnmh-btnlogohover{
59.         left: 0;
60.         right: auto;
61.         border-radius: 0 150px 150px 0;
62. }
63. /*导航图标菜单子容器*/
64. .NMH-g-navicon .Jnmh-m-submenu{
65.         position: absolute;
66.         background-color: transparent;
67.         list-style: none;
68.         top: -020px;
69.         bottom: -020px;
70.         left: -020px;
71.         right: -020px;
72.         margin: 0;
73.         padding: 0;
74. }
76. .NMH-g-navicon .Jnmh-m-submenu .Jnmh-subli{
77.         position: absolute;
78.         width: 100%;height: 100%;
79.         transform: rotate(0deg);
80.     -webkit-transform: rotate(0deg);
81.     transition: all 0.8s ease-in-out;
82. }
84. .Jnmh-m-submenu .Jnmh-subdl{
85.         position: absolute;
86.     left: 50%;
87.     bottom: 100%;
88.     width: 0;
89.     height: 0;
90.     line-height: 1px;
91.     margin-left: 0;
92.     background: #fff;
93.     border-radius: 50%;
94.     text-align: center;
95.     font-size: 1px;
96.     overflow: hidden;
97.     cursor: pointer;
98.     box-shadow: none;
99.     transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
100. }
101. /*导航图标-展开菜单时*/
102. .NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdl{
103.         width: 80px;
104.     height: 80px;
105.     line-height: 80px;
106.     margin-left: -40px;
107.     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
108.     font-size: 14px;
109. }
110. /*导航图标-三级菜单容器*/
111. .NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdd{
112.         position: absolute;
113.         line-height: normal;
114. }

复制代码

html代码

1. <div id="nmh-navicon" class="NMH-g-plugin NMH-g-navicon">
2.                 <button class="Jnmh-btnlogo"></button>
3.                 <ins class="Jnmh-btnlogohover"></ins>
4.                 <ul class="Jnmh-m-submenu">
5.                         <li class="Jnmh-subli">
6.                                 <dl class="Jnmh-subdl">
7.                                         <dt class="NMH-subdt">电商平台</dt>
8.                                         <dd class="NMH-subdd"></dd>
9.                                 </dl>
10.                         </li>
11.                         <li class="Jnmh-subli">
12.                                 <dl class="Jnmh-subdl">
13.                                         <dt class="NMH-subdt">选品平台</dt>
14.                                         <dd class="NMH-subdd"></dd>
15.                                 </dl>
16.                         </li>
17.                         <li class="Jnmh-subli">
18.                                 <dl class="Jnmh-subdl">
19.                                         <dt class="NMH-subdt">会员升级</dt>
20.                                         <dd class="NMH-subdd"></dd>
21.                                 </dl>
22.                         </li>
23.                         <li class="Jnmh-subli">
24.                                 <dl class="Jnmh-subdl">
25.                                         <dt class="NMH-subdt">产品操作</dt>
26.                                         <dd class="NMH-subdd"></dd>
27.                                 </dl>
28.                         </li>
29.                         <li class="Jnmh-subli">
30.                                 <dl class="Jnmh-subdl">
31.                                         <dt class="NMH-subdt">个人中心</dt>
32.                                         <dd class="NMH-subdd"></dd>
33.                                 </dl>
34.                         </li>
35.                 </ul>
36.         </div>

复制代码

javascript代码

1. <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2. <script type="text/javascript">
3.         // 监听鼠标移入logo事件
4.         $(document).on('mouseenter','.Jnmh-btnlogo',function(){
5.                 $('#nmh-navicon').addClass('Jnmh-open');
6.                 GtoggleNavlogo();
7.         });
8.         // 监听鼠标移除导航球移除事件（展开收缩悬浮球为什么不直接监听#nmh-navicon而多了一步监听logo是为了减少边缘触发）
9.         $(document).on('mouseleave','#nmh-navicon',function(){
10.                 $('#nmh-navicon').removeClass('Jnmh-open');
11.                 GtoggleNavlogo();
12.         });
13.         var GtoggleNavlogo = function(){
14.             var li = $('#nmh-navicon').find('.Jnmh-subli');
15.             var lilen = li.length;
16.             var avgDeg =  180/(lilen-1);// 平均角度
17.             var initDeg = 0;// 起始方向角度
18.             if($('#nmh-navicon').hasClass('Jnmh-onleft')){
19.                     // 如果悬浮球被拖拽到左边，则二级菜单则显示右侧
20.                     li.css({transform: 'rotate(0deg)'});
21.                     initDeg =  180;
22.             }else{
23.                     // 默认悬浮球在右边，二级菜单显示在左侧
24.                     li.css({transform: 'rotate(-360deg)'});
25.             }
26.             for(var i=0,j=lilen-1; i<lilen; i++,j--) {
27.                 var d =  initDeg - (i*avgDeg);
28.                 var z = initDeg?j:i;
29.                 // console.log(d);
30.                 $('#nmh-navicon').hasClass('Jnmh-open') ? GrotateNavlogo(li[z],d) : GrotateNavlogo(li[z],0);
31.             }
32.         };
33.         var GrotateNavlogo = function(dom,deg){
34.                 $({a:0}).animate({a:deg}, {
35.                 step: function(now,fx) {
36.                     $(dom).css({ transform: 'rotate('+now+'deg)' });
37.                     $(dom).children().css({ transform: 'rotate('+(-now)+'deg)' });
38.                 }, duration: 0
39.             });
40.         }
42.         // 鼠标拖动logo移动
43.         $(document).on('mousedown','.Jnmh-btnlogo',function(e_down){
44.                 var wrap = $('#nmh-navicon');
45.                 wrap.removeClass('Jnmh-open');
46.                 $('.Jnmh-m-submenu').hide();
47.                 GtoggleNavlogo();
49.                 var positionDiv = wrap.offset();
50.             var distenceX = e_down.pageX - positionDiv.left;
51.             var distenceY = e_down.pageY - positionDiv.top + $(document).scrollTop();
52.                 $(document).mousemove(diy_move);
53.                 function diy_move(e_move){
54.                         var x = e_move.pageX - distenceX;
55.                 var y = e_move.pageY - distenceY;
57.                 if (x < 0) {
58.                     x = 0;
59.                 } else if (x > $(document).width() - wrap.outerWidth(true)) {
60.                     x = $(document).width() - wrap.outerWidth(true);
61.                 }
63.                 if (y < 0) {
64.                     y = 0;
65.                 } else if (y > $(window).height() - wrap.outerHeight(true)) {
66.                     y = $(window).height() - wrap.outerHeight(true);
67.                 }
69.                 $(wrap).css({
70.                     'left': x + 'px',
71.                     'top': y + 'px'
72.                 });
73.                 }
74.                 $(document).mouseup(function() {
75.                         var x = $(wrap).offset().left;
76.                         var rm = '',ad = 'Jnmh-open';
77.                         if(x > $(document).width()/2){
78.                                 x = $(document).width() - wrap.outerWidth(true) -10 ;
79.                                 rm = 'Jnmh-onleft';
80.                         }else{
81.                                 x = 10;
82.                                 ad += ' Jnmh-onleft';
83.                         }
84.                         $(wrap).css({left: x + 'px'}).addClass(ad).removeClass(rm);
85.                         $('.Jnmh-m-submenu').show();
86.                         GtoggleNavlogo();
87.                 $(document).unbind('mousemove',diy_move);
88.             });
90.         });
92. </script>

复制代码

到此这篇关于html滑动仿悬浮球菜单效果的实现的文章就介绍到这了,更多相关html滑动仿悬浮球菜单内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！