这篇文章主要介绍了基于JavaScript实现熔岩灯效果导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
熔岩灯效果 就是鼠标移入的时候，背景跟着滑过去~
两方法如下：
方法一：两个文件，一个HTML，一个JS。
HTML源码，
Document
JS源码，
(function($) { $.fn.spasticNav = function(options) { options = $.extend({ overlap : 15, speed : 500, reset : 1500, color : '#9f1f31', easing : 'easeOutExpo' }, options); return this.each(function() { var nav = $(this), currentPageItem = $('#selected', nav), blob, reset; $('').css({ width : currentPageItem.outerWidth(), height : currentPageItem.outerHeight() + options.overlap, left : currentPageItem.position().left, top : currentPageItem.position().top - options.overlap / 2, backgroundColor : options.color }).appendTo(this); blob = $('#blob', nav); $('li:not(#blob)', nav).hover(function() { // mouse over clearTimeout(reset); blob.animate( { left : $(this).position().left, width : $(this).width() }, { duration : options.speed, easing : options.easing, queue : false } ); }, function() { // mouse out reset = setTimeout(function() { blob.animate({ width : currentPageItem.outerWidth(), left : currentPageItem.position().left }, options.speed) }, options.reset); }); }); // end each }; })(jQuery); 方法二，使用jquery插件 jquery.lavalamp.min.js 实现。
需要调用的文件有：jQuery库，jQuery缓动插件（jquery.easing.min.js），火焰灯效果插件（jquery.lavalamp.min.js）以及一个ul li列表的样式文件。
以上就是基于JavaScript实现熔岩灯效果导航菜单的详细内容，更多请关注0133技术站其它相关文章！
