基于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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JavaScript实现三级联动效果
Jul 15 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
原生JS实现相邻月份日历
Oct 13 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 str_pad 函数使用详解
2009/01/13 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
Jquery选中或取消radio示例
2013/09/29 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python中PyQuery库用法分享
2021/01/15 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
岗位职责风险防控
2014/02/18 职场文书
监督检查工作方案
2014/05/28 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
办公室主任岗位职责
2015/01/31 职场文书
会计出纳岗位职责
2015/03/31 职场文书
金砖之国观后感
2015/06/11 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电