欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-13 09:28:46
熔岩灯效果 就是鼠标移入的时候，背景跟着滑过去~ 两方法如下： 方法一：两个文件，一个html，一个js。 html源码，

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

两方法如下：

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

详情参看：

插件官网介绍：

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

上一篇：

下一篇：

推荐阅读