HTML页面悬浮球,html滑动仿悬浮球菜单效果的实现

这篇文章主要介绍了html滑动仿悬浮球菜单效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

css样式:

html,body{

width: 100%;

height: 100%;

margin: 0;padding: 0;

}

/*导航图标*/

.NMH-g-navicon{

position: fixed;

top: 40%;

right: 020px;

width: 100px;

height: 100px;

}

.NMH-g-navicon.Jnmh-onleft{

right: auto;

left: 020px;

}

/*导航图标logo按钮*/

.NMH-g-navicon .Jnmh-btnlogo{

position: absolute;

display: block;

width: 100px;

height: 100px;

top: 50%;

right: 0;

margin-top: -50px;

border: 0;

background: url(img/icon_128.png) no-repeat center center;

background-size: 95% 95%;

border: 1px solid rgba(0, 0, 0, 0.1);

box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 10px 0px;

outline: none;

border-radius: 50%;

z-index: 1;

}

.NMH-g-navicon .Jnmh-btnlogohover{

position: absolute;

display: block;

width: 100px;

height: 100px;

top: 50%;

right: 0;

margin: 0;padding: 0;

margin-top: -50px;

border: 0;

overflow: hidden;

/*background-color: red;*/

}

/*导航图标logo按钮-鼠标经过*/

.NMH-g-navicon.Jnmh-open .Jnmh-btnlogohover{

margin-top: -150px;

width: 200px;

height: 300px;

border-radius: 150px 0 0 150px;

}

.NMH-g-navicon.Jnmh-onleft .Jnmh-btnlogohover{

left: 0;

right: auto;

border-radius: 0 150px 150px 0;

}

/*导航图标菜单子容器*/

.NMH-g-navicon .Jnmh-m-submenu{

position: absolute;

background-color: transparent;

list-style: none;

top: -020px;

bottom: -020px;

left: -020px;

right: -020px;

margin: 0;

padding: 0;

}

.NMH-g-navicon .Jnmh-m-submenu .Jnmh-subli{

position: absolute;

width: 100%;height: 100%;

transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transition: all 0.8s ease-in-out;

}

.Jnmh-m-submenu .Jnmh-subdl{

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;

}

/*导航图标-展开菜单时*/

.NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdl{

width: 80px;

height: 80px;

line-height: 80px;

margin-left: -40px;

box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

font-size: 14px;

}

/*导航图标-三级菜单容器*/

.NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdd{

position: absolute;

line-height: normal;

}

html代码：

javascript代码：

// 监听鼠标移入logo事件

$(document).on('mouseenter','.Jnmh-btnlogo',function(){

$('#nmh-navicon').addClass('Jnmh-open');

GtoggleNavlogo();

});

// 监听鼠标移除导航球移除事件(展开收缩悬浮球为什么不直接监听#nmh-navicon而多了一步监听logo是为了减少边缘触发)

$(document).on('mouseleave','#nmh-navicon',function(){

$('#nmh-navicon').removeClass('Jnmh-open');

GtoggleNavlogo();

});

var GtoggleNavlogo = function(){

var li = $('#nmh-navicon').find('.Jnmh-subli');

var lilen = li.length;

var avgDeg =  180/(lilen-1);// 平均角度

var initDeg = 0;// 起始方向角度

if($('#nmh-navicon').hasClass('Jnmh-onleft')){

// 如果悬浮球被拖拽到左边，则二级菜单则显示右侧

li.css({transform: 'rotate(0deg)'});

initDeg =  180;

}else{

// 默认悬浮球在右边，二级菜单显示在左侧

li.css({transform: 'rotate(-360deg)'});

}

for(var i=0,j=lilen-1; i

var d =  initDeg - (i*avgDeg);

var z = initDeg?j:i;

// console.log(d);

$('#nmh-navicon').hasClass('Jnmh-open') ? GrotateNavlogo(li[z],d) : GrotateNavlogo(li[z],0);

}

};

var GrotateNavlogo = function(dom,deg){

$({a:0}).animate({a:deg}, {

step: function(now,fx) {

$(dom).css({ transform: 'rotate('+now+'deg)' });

$(dom).children().css({ transform: 'rotate('+(-now)+'deg)' });

}, duration: 0

});

}

// 鼠标拖动logo移动

$(document).on('mousedown','.Jnmh-btnlogo',function(e_down){

var wrap = $('#nmh-navicon');

wrap.removeClass('Jnmh-open');

$('.Jnmh-m-submenu').hide();

GtoggleNavlogo();

var positionDiv = wrap.offset();

var distenceX = e_down.pageX - positionDiv.left;

var distenceY = e_down.pageY - positionDiv.top + $(document).scrollTop();

$(document).mousemove(diy_move);

function diy_move(e_move){

var x = e_move.pageX - distenceX;

var y = e_move.pageY - distenceY;

if (x < 0) {

x = 0;

} else if (x > $(document).width() - wrap.outerWidth(true)) {

x = $(document).width() - wrap.outerWidth(true);

}

if (y < 0) {

y = 0;

} else if (y > $(window).height() - wrap.outerHeight(true)) {

y = $(window).height() - wrap.outerHeight(true);

}

$(wrap).css({

'left': x + 'px',

'top': y + 'px'

});

}

$(document).mouseup(function() {

var x = $(wrap).offset().left;

var rm = '',ad = 'Jnmh-open';

if(x > $(document).width()/2){

x = $(document).width() - wrap.outerWidth(true) -10 ;

rm = 'Jnmh-onleft';

}else{

x = 10;

ad += ' Jnmh-onleft';

}

$(wrap).css({left: x + 'px'}).addClass(ad).removeClass(rm);

$('.Jnmh-m-submenu').show();

GtoggleNavlogo();

$(document).unbind('mousemove',diy_move);

});

});