基于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 读取元素的CSS信息的代码
Feb 07 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
js实现文字滚动效果
Mar 03 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
微信小程序 Storage更新详解
Jul 16 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一些公用函数的集合
2008/03/27 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Python中的集合类型知识讲解
2015/08/19 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
对Python 数组的切片操作详解
2018/07/02 Python
Django--权限Permissions的例子
2019/08/28 Python
Python如何解除一个装饰器
2020/08/07 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
物流专业求职计划书
2014/01/10 职场文书
优秀交警事迹材料
2014/01/26 职场文书
教师对学生的寄语
2014/04/03 职场文书
技校毕业生自荐书
2014/05/23 职场文书
个人租房协议书
2014/11/28 职场文书
七夕情人节问候语
2015/11/11 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis