基于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 相关文章推荐
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
使用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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
javascript常用的方法整理
2015/08/20 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
半年思想汇报
2013/12/30 职场文书
公务员综合考察材料
2014/02/01 职场文书
财务简历的自我评价
2014/03/05 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers