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

});

});

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

本文由 电脑自学网 用户搜集于网络，其版权均为原作者所有，若侵犯您的版权，请来信告知，如需转载，请注明文章来源。

发表评论评分

有人回复时邮件通知我

本站文章均由网友收集于网络，若侵犯您的权益请来信告知，[email protected]

Copyright © 2012-2017 52ZIXUE 电脑自学网  赣ICP备17008695号-1

按文章类型进行搜索

文章

专题

下载

视频

[xh_social_page_login]

分享图片生成中…