熔岩灯效果 就是鼠标移入的时候，背景跟着滑过去~
两方法如下：
方法一：两个文件，一个HTML，一个JS。
HTML源码，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> --> <meta content="EditPlus®"> <meta content=""> <meta content=""> <meta content=""> <title>Document</title> <link href="" /> <style type="text/css"> #nav { position: relative; background: #292929; float: left; } #nav li { float: left; list-style: none; border-right: 1px solid #4a4a4a; border-left: 1px solid black; } #nav li a { color: #e3e3e3; position: relative; z-index: 2; float: left; font-size: 30px; font-family: helvetica, arial, sans-serif; text-decoration: none; padding: 30px 45px; } ul, li { margin: 0; padding: 0; } #blob { border-right: 1px solid #0059ec; border-left: 1px solid #0059ec; position: absolute; top: 0; z-index : 1; background: #0b2b61; background: -moz-linear-gradient(top, #0b2b61, #1153c0); background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px #011331; -webkit-box-shadow: 2px 3px 10px #011331; } </style> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.spasticNav.js"></script> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> <script type="text/javascript"> $('#nav').spasticNav(); </script> </body> </html>
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; $('<li></li>').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列表的样式文件。