导航栏是网站的一个重要部分，具有良好动态效果的导航栏无疑会给网站添色不少，而水平动态导航栏就是其中一种，我一直非常喜欢，当然它分为很多种，这里先来看其中一种效果。

1、效果样例

这个图片相信关注过这种效果导航栏的人都很熟悉了，我也是从这个入手慢慢入门滴...

至于样式结构这里就不详述了，相信都不会怵头，这里上下jquery效果的代码：

; (function ($) {$.extend({'nicenav': function (con) {con = typeof con === 'number' ? con : 400;var $lis = $('#nav>li'), $h = $('#buoy')$lis.hover(function () {$h.stop().animate({'left': $(this).offsetParent().context.offsetLeft}, con);}, function () {$h.stop().animate({'left': '-157px'}, con);})}});
}(jQuery));

2、代码分析

这样我们首先来一点点分析效果的代码实现原理：

首先是最外层的 ;(function($){})(jQuery)是一个匿名函数，通常js库都采用这种自执性的匿名函数来保护内部变量；至于前面的“；”则是为了防止多文件集成一个文件后，高压缩从而造成语法错误而添加的。（“大牛的做派”）

而$.extend({});是我们在写插件中常用的extend扩展方法，像$.fn.extend({});也是这样，举个例子来说的话：

 $.extend({hello:function(){alert('hello');}});

就是讲hello方法添加到jquery的全局变量中去，等调用的时候直接用$.hello()即可，至于我们要分析的那段代码同样$.nicenav(参数)即可。

以上都是在写插件中常用到的基本知识，我们再来看下具体当前效果的实现代码。

con = typeof con === 'number' ? con : 400;

con是我们需要传递的参数，这里代表了“css完成改变的时间”，也可以说是相应的速度，但是这个确实” 数值越大，速度越慢“的。

而js中的typeof函数是用来判断数值类型的，它返回的字符串可能有“number”，“String”，“boolean”，“object”，“function”和“undefined”。

至于===？：则是我们熟悉的三元运算符，===代表了boolean，？代表了是否，：则代表了要么..要么..。

这些都理解了的话，这句话的意思也就自然明白了，如果我们传递过来的参数是数字，那con继续为我们传递过来的那个数字，如果参数不是数字，那我们就默认赋给它一个400，则是防止其它不明白原理的人乱调用，从而发生错误。

var $lis = $('#nav>li'), $h = $('#buoy')

这句则就比较好理解了，只是将相应的取值简写而已，一方面看起来美观，另一方面如果出现更改的情况，可以减少工作量，典型的面向对象思想啊。

 $lis.hover(function () {$h.stop().animate({'left': $(this).offsetParent().context.offsetLeft}, con);}, function () {$h.stop().animate({'left': '-157px'}, con);})

至于这段真正的逻辑，则是#nav>li的hover事件的响应，需要注意的一点是hover()括号的起止之间的方法体，并不一定只有一个方法，这里就有两个，当hover事件发生时和hover事件失去时，不同的响应方法。

animate({},time)方法是样式改变动态化，而stop()事件则是先停止，出现在这里，则是为重复执行事件时明确执行方法。

$(this).offsetParent().context.offsetLeft是父层和当前层的相对距离，offsetParent代表了第一个非流布局的父级元素，offsetLeft就是则就是相对于指定父级的左边距离，至于offsetLeft本身已经是针对于非流父级的，但还要用到上下文context，我当前得到的原因是：因为offset()返回的其实是相对于文档的坐标，需要用jquery的offsetParent明确下父级，而position才是本身就是相对第一个非流布局的父级元素。

通过以上解释，相信你也会很清楚它的实现方法了吧，快点把它用到项目中吧，有没有棒棒哒...

积跬步，聚小流------具有滑动效果的导航相关推荐

积跬步，聚小流------ps有用小技巧，改变png图标颜色
积跬步,聚小流------ps有用小技巧,改变png图标颜色 * 实现效果: 原图: 改动后: * 实现目的: 满足为实现不同界面色彩搭配改动png图标的颜色 * 实现方法: 1.打开Phot ...
积跬步，聚小流------html知识大纲归纳总结
习惯于从熟悉的地方入手的我,每要开始整理学习新东西之前,喜欢把熟悉的相关知识再温习一遍,既是总有所得的缘故,也是如此会将斗志燃到最烈.我总感觉这是病,只是不愿治.... 这次的前端整理,便直接从htm ...
积跬步以至千里_《荀子》名句76则：不积跬步，无以至千里；不积小流，无以成江海...
荀子(约公元前313年-公元前238年),名况,字卿,华夏族(汉族),战国末期赵国人 .著名思想家.文学家.政治家,时人尊称"荀卿".西汉时因避汉宣帝刘询讳,因"荀&qu ...
劝学:不积跬步,无以至千里,不积小流,无以成江海.
领略古人智慧. 不积跬步,无以至千里,不积小流,无以成江海.骐骥一跃,不能十步,驽马十驾,功在不舍.--<荀子·劝学>
【无标题】积跬步，以致千里；积小流，以成江海。
1.自我介绍大家好!我是来自西安工程大学计算机类的大一学生.上学期已经学习了C语言,但是发现自己的代码编程能力并没有多大提升,理论知识基础也还不够扎实.之前也在github中提交过代码.但是没有在C ...
积跬步以至千里_积跬步以至千里，聚小利终成大户
声明:只做客观解读,不做主观预测,仅供参考,不作交易依据. 择股看行业.择时看大盘.买点等共振.炒股就是控制风险. 大盘结束8连阳,跌破5日均线,30分钟形成顶背离,大盘正在走30分钟下跌一笔,舵手 ...
不积跬步无以至千里[转]
不积跬步无以至千里<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> ...
不积跬步，无以致千里--首篇随笔
----不积跬步,无以至千里:不积小流,无以成江海---- 这会儿是2018年9月10日23点喽,一个崭新的周一夜晚.年初开始,就盘算着好好开个博客,记录生活的流水账,分享自己 ...
积跬步以至千里：美柚程序化合作交流会在厦举办
随着互联网用户规模的增长,用户对互联网的依赖性越来越强.使用时长也逐步被拉长,移动互联网已经进入深耕期,移动营销也进入了一个充满变化的新时代.日前,美柚2018年中合作伙伴交流会在厦门成功举办,会上美 ...
编程杂记——积跬步至千里
文章目录 MySQL 概念理解 MySQL mysql修改数据库文件存储路径后,会初始化数据库文件:所以要将老的数据文件拷贝到新的数据文件目录概念理解分布式:分开部署的方式将一个应用的不同功能分 ...

积跬步，聚小流------具有滑动效果的导航

1、效果样例

2、代码分析

积跬步，聚小流------具有滑动效果的导航相关推荐

最新文章

热门文章