导航栏拖拽沿边停靠效果

浏览：654次- 评论：2次- 发布时间：2017-07-25

Html

Css



    
    导航一
    导航二
    导航三
    导航四
    导航五

* {
	margin:0;
	padding:0;
	font-family:"微软雅黑";
}
.nav {
	position:fixed;
	z-index:999;
	overflow:hidden;
}
.shpere {
	height:50px;
	width:50px;
	border-radius:50%;
	border:5px double #000;
}
.top,.bottom {
	width:100%;
	height:50px;
	left:0;
}
.top {
	top:0;
	box-shadow:0 3px 3px #ccc;
}
.bottom {
	bottom:0;
	box-shadow:0 -3px 3px #ccc;
}
.left,.right {
	height:100%;
	width:100px;
	top:0;
}
.left {
	left:0;
	box-shadow:3px 0 3px #ccc;
}
.right {
	right:0;
	box-shadow:-3px 0 3px #ccc;
}
.nav a {
	display:block;
	float:left;
	width:100px;
	height:50px;
	color:#000;
	text-decoration:none;
	text-align:center;
	line-height:50px;
}
.nav span {
	display:block;
	float:left;
	width:50px;
	height:50px;
	text-align:center;
	padding-top:9px;
}
a:hover {
	background:rgba(128,128,128,0.8);
}
.dir {
	position:fixed;
	top:50%;
	width:100%;
	z-index:0;
}
.dir span {
	position:absolute;
	width:80px;
	height:80px;
	background:#eee;
	box-shadow:3px 3px 3px #bbb inset;
	left:50%;
	transform-origin:0% 0%;
	border-radius:10px;
}

var oNav = document.getElementsByClassName('nav')[0];
var oS = oNav.getElementsByTagName('span')[0];
var h = window.innerHeight;
var w = window.innerWidth;
var classStr;
oS.onmousedown = function(e) {

classStr = oNav.className;
	var e = e || window.event;
	let x = e.clientX;
	let y = e.clientY;
	oNav.style.left = x - 25 + 'px'
	oNav.style.top = y - 25 + 'px';
	oNav.className = 'nav shpere';
	this.onmousemove = function(e) {
		let x = e.clientX;
		let y = e.clientY;
		oNav.style.left = x - 25 + 'px'
		oNav.style.top = y - 25 + 'px';
		oNav.style.top = y - 25 + 'px';
	}
	this.onmouseleave = blur2;
}
var blur1 = function() {
		oS.onmouseleave = null;
		var top = oNav.offsetTop + 25;
		var bottom = h - top;
		var left = oNav.offsetLeft + 25;
		var right = w - left;
		var s = [top, bottom, left, right];
		Switch(minOrd(s));
	}

function Switch(result) {
	switch (result) {
	case 0:
		{
			oNav.style.top = 0;
			oNav.style.left = 0;
			oNav.style.bottom = 'auto';
			oNav.style.right = 'auto';
			oNav.className = 'nav top';

};
		break;
	case 1:
		{
			oNav.style.bottom = 0;
			oNav.style.left = 0;
			oNav.style.top = 'auto';
			oNav.style.right = 'auto';
			oNav.className = 'nav bottom';

};
		break;
	case 2:
		{
			oNav.style.left = 0;
			oNav.style.top = 0;
			oNav.style.right = 'auto';
			oNav.style.bottom = 'auto';
			oNav.className = 'nav left';

};
		break;
	case 3:
		{
			oNav.style.right = 0;
			oNav.style.top = 0;
			oNav.style.left = 'auto';
			oNav.style.bottom = 'auto';
			oNav.className = 'nav right';
		};
		break;
	}
	oS.onmousemove = null;
}
oS.onmouseup = blur1;

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3