css样式

1. html,body{
   
2.         width: 100%;
   
3.         height: 100%;
   
4.         margin: 0;padding: 0;
   
5. }
   
6. 
   
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. }
    
50. 
    
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. }
    
75. 
    
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. }
    
83. 
    
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.         }
    
41. 
    
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();
    
48.                
    
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;
    
56. 
    
57.                 if (x < 0) {
    
58.                     x = 0;
    
59.                 } else if (x > $(document).width() - wrap.outerWidth(true)) {
    
60.                     x = $(document).width() - wrap.outerWidth(true);
    
61.                 }
    
62. 
    
63.                 if (y < 0) {
    
64.                     y = 0;
    
65.                 } else if (y > $(window).height() - wrap.outerHeight(true)) {
    
66.                     y = $(window).height() - wrap.outerHeight(true);
    
67.                 }
    
68. 
    
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.             });
    
89. 
    
90.         });
    
91. 
    
92. </script>

复制代码

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

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！