jQuery实现可用于博客的动态滑动菜单.pdfVIP

这篇文章主要介绍了 jQuery 实现可用于博客的动态滑动菜单 ,实例分析了 jQuery 操作鼠 标事件及 css 样式实现动态滑动菜单的技巧 ,非常具有实用价值 ,需要的朋友可以参考下 本文实例讲述了 jQuery 实现可用于博客的动态滑动菜单的方法。分享给大家供大家参 考。具体如下： 代码如下 : lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN gt; lt;html xmlns= lang=en xml:lang=engt; lt;headgt; lt;titlegt;jQuery 滑动菜单插件 lt;/titlegt; lt;script type=text/javascript src=js/jquery1.3.2.jsgt;lt;/scriptgt; lt;script type=text/javascriptgt; (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: 90px, tagDefaultPaddingTop: 30px, bgColor: #B1CCED, bgMoverColor: #7FB0F0, textColor: #e0e0e0, textDefaultColor: #fff }; var options = $.extend(defaults, options); 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); }); }); } }); })(jQuery); lt;/scriptgt; lt;script type=text/javascriptgt; $(document).ready(function() { $(.menu).tagdrop({tagPaddingTop: 60px,bgColor: #B1CCED,bgMoverColor: #7FB0F0,textColor: #e0e0e0}); }); lt;/scriptgt; lt;stylegt; body { margin:0; padding:0; } #nav li {margin: 0;