基于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 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
一些mootools的学习资源
Feb 07 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 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 简单日历实现代码
2009/10/28 PHP
php 读取文件乱码问题
2010/02/20 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
express.js中间件说明详解
2019/03/19 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python文件操作函数用法实例详解
2019/12/24 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
How to spawning asynchronous work in J2EE
2016/08/29 面试题
毕业生自我推荐
2013/11/04 职场文书
大学生求职自我评价
2014/01/16 职场文书
相亲活动方案
2014/08/26 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
导游词之上海豫园
2019/10/24 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js