JQuery 左右移动菜单（精准定位移动距离）

最新推荐文章于 2024-01-02 15:43:11 发布

peachesTao

最新推荐文章于 2024-01-02 15:43:11 发布

阅读量1.7k

点赞数

分类专栏： JQuery 文章标签： jquery 菜单移动

本文链接：https://blog.csdn.net/taoerchun/article/details/41020327

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自适应页面宽度，能精确移动到目标div处。

以下为源码，使用请注明出处。

<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">

#container_menu_all {
margin-left:50px;
margin-top:200px;
}
#container_menu {
overflow:hidden;
height:38px;
float:left;
}
.subMenu {
position:relative;
left:0px;
}
.subMenu div{
width:100px;
height:38px;
margin-left:1px;
margin-right:2px;
float:left;
background-color:blue;
text-align:center;
font-size:12px;
color:white;
}
.subMenu div a {
display:block;
margin-top:12px;
}
#menu_left {
width:32px; height:32px;float:left; margin-top:3px; background-image:url('/images/scroll-left.png') ; background-repeat:no-repeat;background-position:center; cursor:pointer;
}
#menu_right {
width:32px;height:32px;float:left;margin-top:3px;background-image:url('/images/scroll-right.png') ; background-repeat:no-repeat;background-position:center; cursor:pointer;
}

</style>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//右上菜单左右移动功能
moveMenu_Init('load');
$(window).resize(function () {
moveMenu_Init('resize');
});
});
function moveMenu_Init(type) {
//设置菜单容器div宽度
$('#container_menu').width($(window).width() - $('#menu_left').width() - $('#menu_right').width() - parseInt($('#container_menu_all').css('marginLeft').replace('px', ''))-2);
if (type == 'load')//刷新页面
{
$('.subMenu').width(0);
//2.2设置包裹小菜单的div宽度,必须设置
$('.subMenu div').each(function (index) {
var width_current = $(this).width() + parseInt($(this).css('marginLeft').replace('px', '')) + parseInt($(this).css('marginRight').replace('px', ''))
$('.subMenu').width($('.subMenu').width() + width_current);
});
//绑定左右移动图标的onclick事件
$('#menu_left').bind('click', function () {
move(this);
});
$('#menu_right').bind('click', function () {
move(this);
});
}
}
//获取移动方向中离操作图标最近的div的距离
function getMinOffsetLeftDistance(iconobj) {
var icondiv_id = $(iconobj).attr('id');
var div_arry = $('.subMenu div');
var icon_offsetleft = parseInt($(iconobj).offset().left);
var icon_width = $(iconobj).width();
var arry = [];
var minDistance = 0;
$(".subMenu div").each(function () {
var currentdiv_offsetleft = $(this).offset().left;
var currentdiv_width = $(this).width();
var compare_distance;//对比距离
if (icondiv_id == 'menu_left') {
compare_distance = icon_offsetleft + icon_width;
if (compare_distance - currentdiv_offsetleft > 0 && compare_distance - currentdiv_offsetleft > 1) //距离大于1px的纳入移动范围，消除浏览器解析差异
{
arry.push(parseInt(compare_distance - currentdiv_offsetleft));
}
}
else {
compare_distance = currentdiv_offsetleft + currentdiv_width
if (compare_distance - icon_offsetleft > 1)//距离大于1px的纳入移动范围，消除浏览器解析差异
{
arry.push(parseInt(compare_distance - icon_offsetleft));
}
}
});
if (arry.length <= 0) {
return 0;
}
minDistance = arry[0];
for (var i = 0; i < arry.length; i++) {
if (arry[i] < minDistance) {
minDistance = arry[i];
}
}
return minDistance;
}
//移动
function move(iconobj) {
$(iconobj).unbind('click');//点完后立即设为不可点击防止快速点击发生移动位置不对现象
var joinmark = $(iconobj).attr('id') == 'menu_left' ? '+=' : '-=';
var move_distance = getMinOffsetLeftDistance($(iconobj));
if (move_distance > 0) {
$('.subMenu').animate({ left: joinmark + move_distance }, "fast", function () {
$(iconobj).unbind('click').bind('click', function () {//重新绑定click事件
move(this);
});
});
}
else {
$(iconobj).unbind('click').bind('click', function () {
move(this);
});
}
}
</script>
</head>
<body style="margin:0px;">
<div id="container_menu_all">
<div id="menu_left" title="右移"></div>
<div id="container_menu">
<div class="subMenu">
<div><a>学生管理</a></div>
<div><a>成绩管理</a></div>
<div ><a>教学管理</a></div>
<div><a>排课管理</a></div>
<div><a>考试管理</a></div>
<div ><a>教师管理</a></div>
<div ><a>校风管理</a></div>
</div>
</div>
<div id="menu_right" title="左移"></div>
</div>
</body>
</html>