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

2019-11-19 18:08:52

字体：大中小

来源：转载

供稿：网友

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

两方法如下：

方法一：两个文件，一个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列表的样式文件。

详情参看：//www.VeVB.COm/article/102028.htm

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

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

上一篇：js select下拉联动更具级联性!

下一篇：使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)