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


Posted in Javascript onJanuary 04, 2017

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

两方法如下:

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

详情参看:https://3water.com/article/102028.htm

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 #Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 #Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 #Javascript
深入理解Javascript中的valueOf与toString
Jan 04 #Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
You might like
PHP的中问验证码
2006/11/25 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
JavaScript自执行闭包的小例子
2013/06/29 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
js实现网页随机验证码
2020/10/19 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python 处理数据的实例详解
2017/08/10 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
简单了解Python生成器是什么
2019/07/02 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python中无限循环需要什么条件
2020/05/27 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
工程项目经理任命书
2014/06/05 职场文书
招标授权委托书样本
2014/09/23 职场文书
贫困生证明范文
2015/06/16 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书