基于JavaScript实现熔岩灯效果导航菜单
熔岩灯效果就是鼠标移入的时候,背景跟着滑过去~
两方法如下:
方法一:两个文件,一个HTML,一个JS。
HTML源码,
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1"> <!-- <linkhref="favicon.ico"rel="shortcuticon"type="image/x-icon"/> <linkhref="favicon.ico"rel="Bookmark"type="image/x-icon"/> --> <metaname="Generator"content="EditPlus®"> <metaname="Author"content=""> <metaname="Keywords"content=""> <metaname="Description"content=""> <title>Document</title> <linkhref=""rel="stylesheet"/> <styletype="text/css"> #nav{ position:relative; background:#292929; float:left; } #navli{ float:left; list-style:none; border-right:1pxsolid#4a4a4a; border-left:1pxsolidblack; } #navlia{ color:#e3e3e3; position:relative; z-index:2; float:left; font-size:30px; font-family:helvetica,arial,sans-serif; text-decoration:none; padding:30px45px; } ul,li{ margin:0;padding:0; } #blob{ border-right:1pxsolid#0059ec; border-left:1pxsolid#0059ec; position:absolute; top:0; z-index:1; background:#0b2b61; background:-moz-linear-gradient(top,#0b2b61,#1153c0); background:-webkit-gradient(linear,lefttop,leftbottom,from(#0b2b61),to(#1153c0)); -moz-border-radius:4px; -webkit-border-radius:4px; -moz-box-shadow:2px3px10px#011331; -webkit-box-shadow:2px3px10px#011331; } </style> <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <scripttype="text/javascript"src="jquery.spasticNav.js"></script> </head> <body> <ulid="nav"> <li><ahref="#">Home</a></li> <liid="selected"><ahref="#">About</a></li> <li><ahref="#">Blog</a></li> <li><ahref="#">Contact</a></li> </ul> <scripttype="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); returnthis.each(function(){ varnav=$(this), currentPageItem=$('#selected',nav), blob, reset; $('<liid="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(){ //mouseover clearTimeout(reset); blob.animate( { left:$(this).position().left, width:$(this).width() }, { duration:options.speed, easing:options.easing, queue:false } ); },function(){ //mouseout reset=setTimeout(function(){ blob.animate({ width:currentPageItem.outerWidth(), left:currentPageItem.position().left },options.speed) },options.reset); }); });//endeach }; })(jQuery);
方法二,使用jquery插件jquery.lavalamp.min.js实现。
需要调用的文件有:jQuery库,jQuery缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及一个ulli列表的样式文件。
详情参看:https://www.nhooo.com/article/102028.htm
插件官网介绍:http://lavalamp.magicmediamuse.com
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。