基于JavaScript实现熔岩灯效果导航菜单

熔岩灯效果 就是鼠标移入的时候，背景跟着滑过去~

两方法如下：

方法一：两个文件，一个HTML，一个JS。

HTML源码，

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!--
 <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
 <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
 -->
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <link href="" rel="stylesheet" />
 <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="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
 <script type="text/javascript" src="jquery.spasticNav.js"></script>
</head>
<body>
 <ul id="nav">
  <li><a href="#">Home</a></li>
  <li id="selected"><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 id="blob"></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列表的样式文件。

详情参看：http://www.jb51.net/article/102028.htm

插件官网介绍：http://lavalamp.magicmediamuse.com

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。