jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例

  • 内容
  • 评论
  • 相关

分享一段代码实例,它实现了鼠标悬浮导航菜单伸缩的功能。

这种导航菜单还是具有一定的实用价值的,需要搞代码的朋友可以做一下参考。

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).(function($){})(jQuery),一个匿名自执行函数。

(2).$.fn.extend({}),为jquery对象实例扩展对象。

(3).tagdrop: function(options) {},一个函数,参数是要传递的参数。

(4).var defaults = {

tagPaddingTop: '90px',

tagDefaultPaddingTop: '30px',

bgColor: '#B1CCED',

bgMoverColor: '#7FB0F0',

textColor: '#e0e0e0',

textDefaultColor: '#fff'

},此对象定义了默认状态下导航栏的状态,和鼠标悬浮时的一些状态。

(5).var options = $.extend(defaults, options),扩展或者重写defaults对象。

(6).return this.each(function() {

var obj = $(this);

var li_items = $("li", obj);

$("li", obj).css('background-color', options.bgColor);

li_items.mouseover(function(){

$(this).animate({paddingTop: options.tagPaddingTop}, 300);

$(this).css('background-color', options.bgMoverColor);

$(this).css('color', options.textColor);

}).mouseout(function() {

$(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);

$("li",$(this).parent()).css('background-color', options.bgColor);

$("li",$(this).parent()).css('color', options.textDefaultColor);

});

}),return 语句是为了保持链式调用。

this.each中的this是jquery对象实例。

var obj = $(this),转换为jquery对象。

var li_items = $("li", obj),获取obj下面所有的li元素集合。

$("li", obj).css('background-color', options.bgColor),设置li元素的背景色。

再下面的代码就是规定鼠标悬浮和离开时li元素的相关样式。

本文案例为大家展示了《jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。



注意:如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery实现鼠标悬浮可以上下伸缩的导航菜单代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注