癫觉士
- 浏览: 19658 次
- 性别:
- 来自: 南京
-
最新评论
这是一款jquery编写的滑动菜单效果，当点击导航文字时，圆形按钮滑动到当前位置。圆形按钮能根据导航文字的多少自动伸缩。
文件夹中有两个文件，一个是slider_click.html，意思是点击某个选项时滚动。还有一个是slider_hover.html，意思是鼠标移动到某个选项时滚动。有人会问‘不是把click改成hover’不就行了么，但改成hover后会出现一个问题：鼠标不停离开上一个li，进入下一个li，滚动就不停执行。如果从‘日志’移动到‘互动空间’，移动就会停顿两次。为了解决这个问题，slider_hover.html里又增加了一段代码，控制鼠标停止运动时才执行。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目标滑动到当前位置</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$cur=$('.menu').find('.cur');
$li=$('.menu').find('li');
var lastLen=0;//记录前次的距离
var step=0;//圆角形状惯性奔出的距离
$li.click(function(){
var $index=$(this).index();
var length=0;
var m=0;
$(this).find('a').blur();
$('#content').empty().append($(this).find('a').html());//将文本加入撑宽容器
for(var i=0;i<$index;i++)//累加宽度和边距值为运动距离
{
length+=$li.eq(i).width()+40;
}
length+=28;//加入初始边距
if(length>lastLen){//如果向右运动，step为正
step=30;
}
else{
step=-30;
}
lastLen=length;//保存此次的距离
$cur.animate({left:length+step},200,function(){ $cur.animate({left:length},200) });
})
})
</script>
<style type="text/css">
ul,li,ol{ margin:0px;padding:0px;list-style:none}
.nav li{ width:12px;height:48px;overflow:hidden;float:left;background:url(images/nav_bg.gif) }
.nav li.nav_l{ background-position:0px 0px }
.nav li.nav_m{ width:670px;background-position:0px -98px }
.nav li.nav_r{ background-position:0px -49px }
.nav .menu{ position:relative;height:20px;}
.nav .menu a{ height:20px;line-height:200px;display:block;float:left;overflow:hidden;position:relative;z-index:200; background:url(images/nav_menu.png) no-repeat; }
.nav ol { float:left;margin-top:13px; }
.nav ol li{ background:none;text-align:center;margin-left:40px }
.nav ol li.size2 a,.nav ol li.size2{ width:44px }
.nav ol li.size4 a,.nav ol li.size4{ width:80px }
.nav .menu a.item0{ background-position:5px 0px }
.nav .menu a.item1{ background-position:-79px 0px }
.nav .menu a.item2{ background-position:-150px 0px }
.nav .menu a.item3{ background-position:-223px 0px }
.nav .menu a.item4{ background-position:-294px 0px }
.nav .menu .cur{ height:32px; position:absolute;left:28px;top:9px; z-index:100; }
.nav .menu .cur div{ height:32px;float:left;background:url(images/nav_menu_cur.png) }
.nav .menu .cur .cur_l{ width:15px;background-position:0px 0px }
.nav .menu .cur .cur_m{ height:32px;overflow:hidden;padding:0px 3px;line-height:200px;background-position:0px -30px }
.nav .menu .cur .cur_r{ width:15px;background-position:0px -62px }
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="nav_l"></li>
<li class="nav_m">
<div class="menu">
<div class="cur">
<div class="cur_l"></div>
<div id="content" class="cur_m">首页</div>
<div class="cur_r"></div>
</div>
<ol>
<li class="size2"><a class="item0" href="javascript:void(0)">首页</a></li>
<li class="size2"><a class="item1" href="javascript:void(0)">日志</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">相册</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">微博</a></li>
<li class="size4"><a class="item4" href="javascript:void(0)">互动空间</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">留言</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">私信</a></li>
</ol>
</div>
</li>
<li class="nav_r"></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目标滑动到当前位置</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
var e;//当前li元素的索引值
var lastLen=0;//记录前次的距离
var step=0;//圆角形状惯性奔出的距离
var posi;//计时运动
function slide(){
var $index=e;
var length=0;
var m=0;
$li.eq(e).find('a').blur();
for(var i=0;i<$index;i++)//累加宽度和边距值为运动距离
{
length+=$li.eq(i).width()+40;
}
length+=28;//加入初始边距
if(length>lastLen){//如果向右运动，step为正
step=30;
}
else{
step=-30;
}
lastLen=length;//保存此次的距离
clearInterval(posi) ;
$cur.animate({left:length+step},200,function(){ $cur.animate({left:length},100) });
$('#content').empty().append($li.eq(e).find('a').html());//将文本加入撑宽容器
}
$(function(){
$cur=$('.menu').find('.cur');
$li=$('.menu').find('li');
$li.mousemove(function(){ //当鼠标移动时，不执行posi，当鼠标静止100毫秒时posi执行。
//添加这段的目的是防止鼠标在导航上移动时，因为不停离开上一个li，进入下一个li而不停执行posi，造成运动断断续续。
clearInterval(posi);
e=$(this).index();//记录当前元素的索引值
posi=setInterval('slide()',100);
}).mouseout(function(){ clearInterval(posi)})
})
</script>
<style type="text/css">
ul,li,ol{ margin:0px;padding:0px;list-style:none}
.nav li{ width:12px;height:48px;overflow:hidden;float:left;background:url(images/nav_bg.gif) }
.nav li.nav_l{ background-position:0px 0px }
.nav li.nav_m{ width:670px;background-position:0px -98px }
.nav li.nav_r{ background-position:0px -49px }
.nav .menu{ position:relative;height:20px;}
.nav .menu a{ height:20px;line-height:200px;display:block;float:left;overflow:hidden;position:relative;z-index:200; background:url(images/nav_menu.png) no-repeat; }
.nav ol { float:left;margin-top:13px; }
.nav ol li{ background:none;text-align:center;margin-left:40px }
.nav ol li.size2 a,.nav ol li.size2{ width:44px }
.nav ol li.size4 a,.nav ol li.size4{ width:80px }
.nav .menu a.item0{ background-position:5px 0px }
.nav .menu a.item1{ background-position:-79px 0px }
.nav .menu a.item2{ background-position:-150px 0px }
.nav .menu a.item3{ background-position:-223px 0px }
.nav .menu a.item4{ background-position:-294px 0px }
.nav .menu .cur{ height:32px; position:absolute;left:28px;top:9px; z-index:100; }
.nav .menu .cur div{ height:32px;float:left;background:url(images/nav_menu_cur.png) }
.nav .menu .cur .cur_l{ width:15px;background-position:0px 0px }
.nav .menu .cur .cur_m{ height:32px;overflow:hidden;padding:0px 3px;line-height:200px;background-position:0px -30px }
.nav .menu .cur .cur_r{ width:15px;background-position:0px -62px }
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="nav_l"></li>
<li class="nav_m">
<div class="menu">
<div class="cur">
<div class="cur_l"></div>
<div id="content" class="cur_m">首页</div>
<div class="cur_r"></div>
</div>
<ol>
<li class="size2"><a class="item0" href="javascript:void(0)">首页</a></li>
<li class="size2"><a class="item1" href="javascript:void(0)">日志</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">相册</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">微博</a></li>
<li class="size4"><a class="item4" href="javascript:void(0)">互动空间</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">留言</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">私信</a></li>
</ol>
</div>
</li>
<li class="nav_r"></li>
</ul>
</div>
</body>
</html>
- 滑动导航.rar (41.9 KB)
- 下载次数: 11
1
顶
顶
1
踩
踩
分享到：
发表评论
-
将博客搬至CSDN
2017-02-04 15:32 292将博客搬至CSDN -
倒计时激活按钮
2016-08-30 18:48 431<script type="text/j ... -
React router 配置demo
2016-06-08 00:35 617网上查了很多资料，都没有可以直接拿来用的，大多数是因为版本差 ... -
React 组件之列表的增加，删除，移动操作
2016-05-30 23:34 2815用react 组件实现列表的 ... -
React组件类目选择（实际项目）
2016-05-27 10:21 545综合概述：比较上一个例子，数据从实际接口获取的，首先调取接 ... -
React 组件编写之 类目选择
2016-05-26 18:58 781最近学习react，写 ... -
文本输入框字数限制
2016-04-14 19:08 618$.fn.letterLimit=funct ... -
数字格式化JS
2016-04-14 19:05 456function decimal(num,opt){//保留 ... -
三步骤摆脱传统拼接字符串
2016-04-14 14:44 380一.定义textarea模板 <textar ... -
jquery实现群星闪耀的效果（改良版）免费下载
2012-12-24 16:30 680改良版的群星闪烁，更加活跃奔放，随机位置出现。只用了4颗星，却 ... -
jquery实现群星闪烁的效果
2012-12-20 19:30 1315jquery实现群星闪烁的效果。代码产生指定数量的星星，位置随 ... -
jquery旋转木马特效
2012-12-13 15:09 1249一款jquery编写的旋转木马特效，代码只有四十多行，点击左右 ... -
鼠标滑过图片渐变大小显示
2012-12-04 15:44 843代码不多，但是效果很炫，我根据曾经看过的flash的 ... -
文本框获得焦点清空value的插件
2012-11-12 17:14 995效果细节： 点击文本框，初始信息清空；点击文本框外部，初 ... -
控制页面所有tab选项卡
2012-11-09 10:26 929曾经做过一个页面，用 ... -
浏览器IE6兼容最大最小高度
2012-10-19 09:55 814<!DOCTYPE><html>< ...
相关推荐
本文将深入探讨如何利用jQuery实现滑动菜单及其背后的动画效果。 ### 一、jQuery简介 jQuery是由John Resig于2006年发布的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery的核心特性包括...
本文将详细讲解这一效果的实现原理与步骤。 首先，我们要理解jQuery的基本概念。jQuery是一个高效、简洁的JavaScript库，它极大地简化了JavaScript代码，提供了丰富的DOM操作、事件处理、动画设计等功能。在这个...
"使用JQuery编写的水平真正滑动下拉菜单"是一个实现这种交互效果的技术实践，它不同于常见的滚动效果，而是通过平滑的滑动动画来展开和收起子菜单，提供了更为流畅的视觉体验。 首先，我们要理解JQuery的基础。...
总的来说，创建一个“超炫滑动菜单”需要理解HTML、CSS和jQuery的基本用法。通过结合这些技术，我们可以为用户提供更直观、更吸引人的导航体验。在实际项目中，还可以根据需求添加更多的交互细节，如动画效果的缓动...
4. 编写jQuery脚本，监听用户交互，如点击事件，并执行相应的操作，如改变高亮状态、滑动菜单等。 5. 对于响应式设计，调整CSS以适应不同屏幕尺寸。 6. 如果需要，实现Ajax加载功能，更新页面内容。 在"jiaoben489...
**jQuery滑动门效果**是一种常见的前端交互设计，主要用于创建导航菜单或图片轮播效果。在网页设计中，滑动门效果能为用户提供流畅、直观的界面体验，增强网站的吸引力和可操作性。这个效果通常由jQuery库来实现，...
在网页设计中，导航菜单...开发者可以通过导入jQuery库，编写少量的JavaScript代码，就能实现具有弹性和动态效果的导航菜单。这个压缩包提供的资源可以帮助开发者快速搭建并自定义自己的滑动菜单，提升网站的用户体验。
"jQuery滑动菜单特效"就是这样一个技术，它模仿了iPhone的图标滑动行为，为网页菜单带来了生动的触控体验。这个特效不仅提供了视觉上的享受，还能让用户在移动设备上更加流畅地浏览和操作菜单。 **jQuery库基础** ...
本文将深入探讨如何使用JQuery库实现一种独特的“滑动门”（Sliding Doors）导航菜单效果。这种效果通过动态改变元素的CSS属性，为用户带来流畅且吸引人的交互体验。 首先，让我们理解什么是“滑动门”技术。在UI...
"jQuery左右伸缩滑动效果"是一种常见的JavaScript特效，它广泛应用于导航菜单、图片轮播、内容切换等多个场景。jQuery库以其简洁的API和丰富的插件，为开发者提供了实现这种效果的便利。本文将详细介绍如何利用...
"CSS jQuery左右滑动展开的图文导航菜单"是一种创新的交互式菜单设计，它结合了CSS样式和jQuery库来实现动态的、响应式的用户体验。下面我们将深入探讨这个主题。 首先，CSS（层叠样式表）在这里主要用于定义导航...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，包括滑动菜单。本实例将详细介绍如何利用jQuery和一个名为`jquery.backgroundPosition.js`的插件创建一个滑动菜单。 ### jQuery基础 ...
而`js`文件则是JavaScript代码，包含使用jQuery编写的动画效果逻辑。 例如，为了实现滑动展开效果，JS代码可能如下： ```javascript $(document).ready(function(){ $('.nav-item').hover(function(){ $(this)....
【标题】"简单的jQuery竖向滑动菜单"涉及的核心知识点主要集中在jQuery库的使用和创建交互式的CSS3动画效果上，适用于网页设计和前端开发。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
第三个效果可能是触摸友好的触控滑动菜单。考虑到移动设备的广泛使用，这种菜单在用户触摸屏幕时会响应滑动手势。可以利用`swipe`插件或者直接使用`touchstart`, `touchmove`, `touchend`等触摸事件来捕捉用户的滑动...
本项目聚焦于一个由Jquery编写的滑动导航菜单，这是一个轻量级且美观的解决方案，对于提升用户体验有着显著的效果。 Jquery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在本...
在探讨“wordpress主题七款jquery滑动效果的主题”这一话题时，我们首先需要理解几个关键词：WordPress、jQuery以及滑动效果。接下来，我们将详细介绍这些概念，并深入分析这七款jQuery滑动效果的主题。 ### 一、...
"jQuery鼠标悬停滑动下拉导航菜单效果"是一个常见的网页交互设计技术，广泛应用于企业网站和商城网站，以提升用户体验。这个效果通过结合JavaScript库jQuery实现，使得当用户将鼠标悬停在菜单项上时，会滑动展示下...
jQuery.mmenu是一款强大的JavaScript插件，专为创建响应式的侧滑菜单而设计。这款插件在Web开发领域中被广泛使用，因为它能够提供流畅、功能丰富的用户体验，尤其适合移动设备和触摸屏。以下是对该插件及其核心特性...