jQuery可拖动图标导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery可拖动图标导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery可拖动图标导航菜单</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>

<div class="menu" id="fd">
	<div class="box" style="display:none;">
		<a class="t1" href="http://www.baidu.com/jiaoben/"></a>
		<a class="t2" href="http://www.baidu.com/jiaoben/"></a>
		<a class="t3" href="http://www.baidu.com/jiaoben/"></a>
		<a class="t4" href="http://www.baidu.com/jiaoben/"></a>
		<a class="t5" href="http://www.baidu.com/jiaoben/"></a>
		<a class="t6" href="http://www.baidu.com/jiaoben/"></a>
	</div>
</div>
</body>
</html>

JS代码(script.js):

//浮动导航条展开与收缩$(function (){
	var box = $('.menu .box');
	$('.menu').hover(function (){
	box.stop().show(300);
}
,function (){
	box.stop().hide(150);
}
)}
)//浮动导航条拖动$(function (){
	var box = document.getElementById('fd');
	box.onmousedown = function (event){
	var e = event || window.event,t = e.target || e.srcElement,//鼠标按下时的坐标x1,y1 x1 = e.clientX,y1 = e.clientY,//鼠标按下时的左右偏移量 dragLeft = this.offsetLeft,dragTop = this.offsetTop;
	document.onmousemove = function (event){
	var e = event || window.event,t = e.target || e.srcElement,//鼠标移动时的动态坐标 x2 = e.clientX,y2 = e.clientY,//鼠标移动时的坐标的变化量 x = x2 - x1,y = y2 - y1;
	box.style.left = (dragLeft + x) + 'px';
	box.style.top = (dragTop + y) + 'px';
}
document.onmouseup = function (){
	this.onmousemove = null;
}
}
}
)

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* menu */
.menu{width:80px;height:80px;position:fixed;top:340px;left:360px;background:url(../images/menu.png) no-repeat;cursor:move;}
*html .menu{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin-top:340px;}
.menu .box{width:200px;height:253px;background:url(../images/m-bg.png) repeat;position:absolute;top:-88px;left:-30px;display:none;}
.menu .box a{background:url(../images/m1.png) no-repeat;position:absolute;}
.menu .box a:hover{background:url(../images/m2.png) no-repeat;}
.menu .box .t1{background-position:0px 0px;width:49px;height:59px;left:34px;top:8px;}
.menu .box .t2{background-position:0px -80px;width:49px;height:52px;left:104px;top:24px;}
.menu .box .t3{background-position:0px -160px;width:58px;height:50px;left:134px;top:84px;}
.menu .box .t4{background-position:0px -240px;width:54px;height:49px;left:126px;top:154px;}
.menu .box .t5{background-position:0px -320px;width:50px;height:57px;left:74px;top:189px;}
.menu .box .t6{background-position:0px -400px;width:50px;height:54px;left:3px;top:185px;}
.menu .box .t1:hover{background-position:0px 0px;}
.menu .box .t2:hover{background-position:0px -80px;}
.menu .box .t3:hover{background-position:0px -160px;}
.menu .box .t4:hover{background-position:0px -240px;}
.menu .box .t5:hover{background-position:0px -320px;}
.menu .box .t6:hover{background-position:0px -400px;}

附件:下载该文件资源,减少时间成本(增值服务)