特效演示地址：http://itxiaoming.sinaapp.com/demo03/demo.html
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="main"> <div id="menu"> <div id="slider"></div> <ul id="menu_ul"> <li>首页</li> <li>新闻中心</li> <li>业务</li> <li>案例</li> <li>关于我们</li> </ul> </div> </div> </body> </html>
$(document).ready(function(){
var width = $("#menu_ul li:first").outerWidth(true);
$("#slider").width(width);
$("#menu_ul li").mouseover(function(){
var div = $("#slider");
//获取当前栏目块的宽度
var _width = $(this).outerWidth(true);
//计算当前栏目块所在的位置
var _left = 0;
for( var i = 0 ; i < $(this).index() ; i++ ){
_left += $("#menu_ul li:eq("+i+")").outerWidth(true);
}
var _divLeft = div.css("left");
var n1 = 20;
var n2 = -30;
var n3 = 10;
/**
* 如果计算出来的位置大于当前滑块的位置，则是加法，否则是减法
* 加法就是向右弹，减法就是向左弹
*/
if( parseInt(_divLeft) > parseInt(_left) ){
n1 = parseInt(0 - n1);
n2 = parseInt(0 - n2);
n3 = parseInt(0 - n3);
}
//移动滑块到当前栏目块下并修改滑块的宽度为当前栏目块的宽度，然后开启一个反弹的动画效果
_left += n1;
div.stop(true,false).animate({left:_left,width:_width},500);
_left += n2;
div.animate({left:_left},500);
_left += n3;
div.animate({left:_left},500);
});
// $(".menu_li").mouseout(function(){
// var div = $(this);
// div.toggleClass('menu_li_b');
// });
});
初始化的时候先初始化滑块的位置在首页上，然后给栏目块绑定鼠标放上去事件。
1.放上去后，计算鼠标所在块的位置
2.获取滑块的位置，然后比较判断滑块是往左还是往右滑动的
3.计算出滑块的弹性位置值，然后设置滑块弹性动画
/* demo01 css */
body{
padding: 0px;
border: 0px;
margin: 0px;
}
#main{
margin: auto;
display: block;
width: 1000px;
height: 100%;
text-align: center;
position:relative;
}
#menu{
position: relative;
background: #333;
height: 44px;
width: 100%;
margin-top: 10px;
text-align: center;
overflow: hidden;
}
#slider{
background: red;
height: 44px;
position: absolute;
left: 0px;
}
#menu_ul{
position: absolute;
padding: 0px;
margin: 0px;
border: 0px;
height: 44px;
width: 980px;
padding-left: 0px;
}
li{
padding: 15px 30px;
float: left;
color: #FFF;
font-family: "Microsoft Yahei";
font-weight: 600;
font-size: 14px;
line-height: 14px;
cursor: pointer;
}
相关推荐
4. **滑块(Slider)**：创建可调节的滑动条，常用于设置数值、音量控制等。 5. **日期选择器(Datepicker)**：为输入框添加日历选择功能，简化用户输入日期的过程。 6. **菜单(Menu)**：创建下拉式菜单，便于组织和...
在本特效中，jQuery被用来处理用户交互，如鼠标滚动事件，以及动态改变导航条的状态。 响应式设计是现代网页开发的关键，确保网站在不同设备上都能提供良好的用户体验。在这个特效中，导航条会根据浏览器窗口的大小...
在魅族导航条特效中，jQuery UI的菜单栏目导航功能可能被用来创建可扩展的、响应式的菜单结构，允许用户在多级菜单间轻松切换，提供更好的导航路径。 【JavaScript特效】是利用JavaScript语言来实现网页的动态效果...
**jQuery视差滑块幻灯特效详解** 在网页设计中，滑块和幻灯片效果是一种常见的元素，用于展示多张图片或内容，同时提供良好的用户体验。jQuery库因其易用性和丰富的插件库，常被用来实现这类效果。本教程将深入讲解...
总的来说，jQuery UI分页滑块提供了一种直观、动态的方式来导航多页内容，使得用户界面更加互动且易于操作。这个压缩包文件中的内容可能包括了实现上述功能的HTML、CSS和JavaScript代码，通过学习和理解这些代码，...
【标题】中的“jQuery实现的响应式滑块导航顶部固定特效源码”表明这是一个使用jQuery库来创建的网页组件，具体来说是一个响应式的滑块导航菜单，并且在页面滚动时能固定在顶部，以提供持续的导航功能。这种设计常见...
《jQuery八大精彩特效详解》 在网页开发中，jQuery库以其简洁的语法和强大的功能深受开发者喜爱。本文将深入解析标题提及的“jquery8个很漂亮的特效”，通过这些实例，帮助读者更好地理解和运用jQuery，提升网页...
4. **Slider（滑块）**：可以用于创建范围选择器、调整值的控制条，常用于音量调节、进度条等场景。 5. **Datepicker（日期选择器）**：提供了一个方便的日期选择界面，广泛应用于表单输入，如预订系统或日程安排。...
"jQuery滑块导航顶部固定特效代码"是一种利用jQuery库实现的交互式导航菜单，具有响应式布局和顶部固定特性。这篇文章将详细介绍这个特效的实现原理和相关知识点。 **1. jQuery基础** jQuery是一个广泛使用的...
**jQuery垂直Tabs新闻滑块特效代码详解** 在网页设计中，动态效果的运用可以极大地提升用户体验，其中jQuery作为一款轻量级的JavaScript库，因其易用性和丰富的插件库而广受欢迎。本教程将深入讲解如何实现一个基于...
如，`jQuery.scrollbar`用于美化滚动条，`jQuery.dataTables`为表格添加排序、过滤和分页功能，`jQuery.slider`创建滑块效果，`jQuery.modal`实现模态对话框等。 7. **Ajax加载优化**： `$.ajaxStart()`和`$....
【JS特效-其它代码】标签表明这个代码示例属于JavaScript特效的一种，但可能不局限于常见的滚动条、下拉菜单或弹出框等常见特效，而是属于更特殊的类别，即全屏时间轴滑块。 在提供的压缩包中，有两个文件： 1. **...
使用`$(window).scroll()`事件监听滚动条，配合`.offset()`或`.position()`方法，可以实现固定导航条、滚动到顶部等特效，提高用户浏览网页的舒适度。 8. **响应式设计** jQuery可以辅助实现响应式设计，通过检测...
【jQuery圆形气泡导航特效】是一种常见的网页交互设计，它结合了jQuery库的动态效果和HTML/CSS的布局技巧，创造出美观且引人注目的导航菜单。这种特效通常用于网站的首页或者其他需要突出展示主要功能或分类的地方，...
5. **无障碍性**：为了照顾到所有用户，包括那些有特殊需求的人，特效应遵循无障碍设计原则，如支持键盘导航和屏幕阅读器。 6. **兼容性**：由于jQuery是一个广泛支持的JavaScript库，所以这个特效应该能在主流...
《nivo-slider3.2：打造出色的jQuery滑动特效》 在Web开发中，动态、交互的用户体验往往能提升网站的吸引力。nivo-slider3.2是一款基于jQuery的滑动插件，它以其丰富的功能、良好的兼容性和简洁的API，深受开发者...
这个特效利用了JavaScript库jQuery的强大功能，创建了一个响应式的滑块导航，当用户滚动页面时，导航条会始终保持在屏幕顶部，提供持续的导航选项。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档...
【标题】"75款常用的jquery特效前端网页代码"涵盖了jQuery在前端开发中的广泛应用和重要性。jQuery是一款高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务，使得前端开发变得...
2. **滑块(Slider)**：提供水平或垂直的滑动条，常用于调整音量、亮度等数值。 3. **日期选择器(Datepicker)**：提供易于使用的日历组件，用户可以选择单个日期或日期范围。 4. **拖放(Draggable/Droppable)**：...