基于JavaScript实现熔岩灯效果导航菜单

前端之家收集整理的这篇文章主要介绍了基于JavaScript实现熔岩灯效果导航菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

熔岩灯效果 就是鼠标移入的时候,背景跟着滑过去~

方法如下:

方法一:

两个文件,一个HTML,一个JS。

HTML源码,

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content=""> Document

JS源码,

$.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">').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列表的样式文件

详情参看:

插件官网介绍:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章