jQuery实现带滚动线条导航效果的方法


Posted in Javascript onJanuary 30, 2015

本文实例讲述了jQuery实现带滚动线条导航效果的方法。分享给大家供大家参考。具体分析如下:

最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时“可望而不可及”。今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果。

效果如下:

首页
说说
日志
相册
   
CSS:

body,ul,li{margin:0;padding:0;}
#testnav{;height:80px;background:#333;}
.testmenu{width:320px;padding-top:45px;margin:0 auto;}
.testbox div{float:left;width:80px;height:30px;text-align:center;}
.testbox a{color:#ccc;text-decoration:none;font:700 12px/1 "宋体";}
.testbox a:hover{color:#CCEEFF;text-decoration:underline;}
.testline-box{width:100%;background:#eee;}
.testline{display:block;height:3px;width:80px;background:#999;}

HTML:

<div id="testnav">
 <div class="testmenu">
  <div class="testbox">
   <div><a href="javascript:void(0)">首页</a></div>
   <div><a href="javascript:void(0)">说说</a></div>
   <div><a href="javascript:void(0)">日志</a></div>
   <div><a href="javascript:void(0)">相册</a></div>
  </div>
  <div style="clear:both;"></div>
  <div class="testline-box">
 <span class="testline"></span>
 </div>
 </div>
</div>

jQuery:

var $line=$("span.testline");
var $w=$(".testbox > div").width();
var m=0;
$(".testbox > div").each(function(n){
 var x=$w*n;
 $(this).mouseenter(function(){
  $line.stop(true,true).animate({"margin-left":x},"slow","easeOutBack");
 });
 $("a",this).click(function(){
  m=x;
 });
});
$(".testbox").mouseleave(function(){
 $line.stop(true,true).animate({"margin-left":m},"slow","easeOutBack");
});

代码写的比较粗糙,再加上自己水平有限,或许您可以简化写的更好(反正大致思路应该就是这样+_+)。

注意:代码中使用了easing插件的效果。记得要去下载并引用这个插件。如果不想使用easing插件则可将JS中的“easeOutBack”删掉或者换成“swing”。

demo中的菜单的链接地址我使用了javascript:void(0)代替,主要目的是为了方便演示效果。在实际运用中,我们可以根据当前的url来判断当前所在位置,确定位置之后再重新给JavaScript中变量m赋值,从而能确定线条应处于哪个菜单下。当然肯定还有其他方法来判断当前位置。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
jquery实现拖拽调整Div大小
Jan 30 #Javascript
jQuery中$.click()无效问题分析
Jan 29 #Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 #Javascript
js操作滚动条事件实例
Jan 29 #Javascript
jQuery调取jSon数据并展示的方法
Jan 29 #Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 #Javascript
浅谈Javascript 数组与字典
Jan 29 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python sorted函数的小练习及解答
2019/09/18 Python
django框架两个使用模板实例
2019/12/11 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
草船借箭教学反思
2014/02/03 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
买卖车协议书
2014/04/21 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
工作收入证明范本
2015/06/12 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android