成都web前端培训
成都达内金融街中心

18628200088

热门课程

视觉增强jQuery插件(Bootstrap)

  • 时间:2016-06-28 15:32
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——JQuery.hoverify-bootnav是一款Bootstrap导航菜单动画视觉增强jQuery插件。该插件在Bootstrap导航菜单的基础上,当鼠标滑过导航菜单项时,可以制作出非常炫酷的遮罩层滑动效果。


使用方法

使用该导航菜单插件需要中引入bootstrap相关文件,以及hoverifyBootnav.css和hoverifyBootnav.js文件。如果你需要其它的easing效果,还要在页面中添加jquery.easing.js文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="css/hoverifyBootnav.css">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript" src="js/hoverifyBootnav.js"></script>                

HTML结构

使用bootstrap原生的nav导航菜单的HTML结构:

<ul class="nav nav-tabs nav-stacked">

<li role="presentation" class="active"><a href="#">Home</a></li>

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

<li role="presentation" ><a href="#">Commands & account</a></li>

</ul> 

初始化插件

在页面DOM原生加载完毕之后,可以通过hoverifyBootnav()方法来初始化该导航菜单插件。

$(document).ready(function(){

$('ul.nav').hoverifyBootnav();

});

HTML中使用data属性

<ul class="nav nav-tabs nav-stacked" data-hbn="">

<li role="presentation" class="active"><a href="#">Home</a></li>

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

<li role="presentation" ><a href="#">Commands & account</a></li>

</ul>                 

配置参数

可用的配置参数如下:

duration_effect_on   ,    //400

duration_effect_off  ,    //1000

easing_effect_on     ,    //null

easing_effect_off    ,    //null

effect_mouse_hover   ,    //classic or teleportation

effect_mouse_out     ,    //classic or teleportation

background_color     ,    //null

color                ,    //null

//Function

my_effect_mouse_hover ,    //null

my_effect_mouse_out  ,    //null

也可以在HTML代码中通过data属性来设置参数:

<ul class="nav nav-tabs" data-hbn-options='{ "duration_effect_on" : 700,

"duration_effect_off" : 1000,

"background_color" : "red"}'>

<li role="presentation" class="active"><a href="#">Home</a></li>

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

<li role="presentation"><a href="#">Commands & account</a></li>

</ul>                 

自定义动画

你可以设置自己的鼠标进入和离开是的回调函数:

$('ul.nav.do-hbn').hoverifyBootnav({

'duration_effect_on' : 400,

'duration_effect_off' : 1000,

'my_effect_mouse_hover': function(){ //do what you want },

'my_effect_mouse_out': function(){ //do what you want }

});                 

也可以自定义easing效果:

$('ul.nav.do-hbn').hoverifyBootnav({

'duration_effect_on' : 400,

'duration_effect_off' : 1000,

'easing_effect_on' : 'easeOutElastic',

'easing_effect_off' : 'easeOutBack',

'background_color' : 'black',

'color' : 'red'

});                 

如果你需要单独设置某个nav的效果,可以:

<ul class="nav nav-tabs nav-stacked" data-hbn-background-color="green">

<li role="presentation" class="active"><a href="#">..</a></li>

<li role="presentation"><a href="#">..</a></li>

</ul>                

你可以通过.hoverboot-pill来设置自己的遮罩层效果。

.hoverboot-pill{

background-color: none;

border-bottom: 2px solid #337ab7

上一篇:jQuery幻灯片插件(带音效的旋转式)
下一篇:炫酷鼠标滑过特效分享
选择城市和中心
贵州省

广西省

海南省