jQuery弹性背景导航代码插件-jQuery.movebg.js
2015-02-20 09:49:01 访问(1972) 赞(0) 踩(0)
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery弹性背景导航代码插件-jQuery.movebg.js</title>
<style>
*
{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* 代码整理：霜叶工作室 www.slowx.net */
/* 正文 */
.wraper
{
width: 960px;
padding-top: 100px;
margin: 0 auto;
}
.nav
{
position: relative;
width: 100%;
height: 40px;
background: #C70757;
overflow: hidden;
}
.nav-item
{
position: relative;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
z-index: 1;
}
.nav-item a
{
display: block;
height: 40px;
color: #fff;
}
.nav-item a:hover
{
color: #fff;
}
.move-bg
{
display: none;
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 40px;
background: #4D0B33;
z-index: 0;
}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div class="wraper">
<div class="nav">
<ul>
<li class="nav-item"><a href='http://www.slowx.net/'>霜叶工作室</a></li>
<li class="nav-item"><a href='http://www.slowx.net/nav/'>菜单导航</a></li>
<li class="nav-item"><a href='http://www.slowx.net/time/'>时间日期</a></li>
<li class="nav-item"><a href='http://www.slowx.net/banner/'>焦点图</a></li>
<li class="nav-item"><a href='http://www.slowx.net/tab/'>tab标签</a></li>
<li class="nav-item"><a href='http://www.slowx.net/jquery/'>jquery特效</a></li>
<li class="nav-item"><a href='http://www.slowx.net/service/'>在线客服</a></li>
<li class="nav-item"><a href='http://www.slowx.net/ads/'>广告代码</a></li>
</ul>
<!--移动的滑动-->
<div class="move-bg">
</div>
<!--移动的滑动 end-->
</div>
</div>
<script src="<%=jQuery%>"></script>
<script type="text/javascript" language="javascript" src="<%=strWebPhyPath%>/JavaScripts/jquery.movebg.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$(".nav").movebg({ width: 120/*滑块的大小*/, extra: 40/*额外反弹的距离*/, speed: 300/*滑块移动的速度*/, rebound_speed: 400/*滑块反弹的速度*/ });
})
</script>
<!-- 代码部分end -->
</body>
</html>
-
(function($){
$.fn.movebg=function(options){
var defaults={
width:120,/*移动块的大小*/
extra:50,/*反弹的距离*/
speed:300,/*块移动的速度*/
rebound_speed:300/*块反弹的速度*/
};
var defaultser=$.extend(defaults,options);
return this.each(function(){
var _this=$(this);
var _item=_this.children("ul").children("li").children("a");/*找到触发滑块滑动的元素 */
var origin=_this.children("ul").children("li.cur").index();/*获得当前导航的索引*/
var _mover=_this.find(".move-bg");/*找到滑块*/
var hidden;/*设置一个变量当html中没有规定cur时在鼠标移出导航后消失*/
if (origin==-1){origin=0;hidden="1"} else{_mover.show()};/*如果没有定义cur,则默认从第一个滑动出来*/
var cur=prev=origin;/*初始化当前的索引值等于上一个及初始值;*/
var extra=defaultser.extra;/*声明一个变量表示额外滑动的距离*/
_mover.css({left:""+defaultser.width*origin+"px"});/*设置滑块当前显示的位置*/
//设置鼠标经过事件
_item.each(function(index,it){
$(it).mouseover(function(){
cur=index;/*对当前滑块值进行赋值*/
move();
prev=cur;/*滑动完成对上个滑块值进行赋值*/
});
});
_this.mouseleave(function(){
cur=origin;/*鼠标离开导航时当前滑动值等于最初滑块值*/
move();
if(hidden==1){_mover.stop().fadeOut();}/*当html中没有规定cur时在鼠标移出导航后消失*/
});
//滑动方法
function move(){
_mover.clearQueue();
if(cur<prev){extra=-Math.abs(defaultser.extra);} /*当当前值小于上个滑块值时，额外滑动值为负数*/
else{extra=Math.abs(defaultser.extra)};/*当当前值大于上个滑块值时，滑动值为正数*/
_mover.queue(
function(){
$(this).show().stop(true,true).animate({left:""+Number(cur*defaultser.width+extra)+""},defaultser.speed),
function(){$(this).dequeue()}
}
);
_mover.queue(
function(){
$(this).stop(true,true).animate({left:""+cur*defaultser.width+""},defaultser.rebound_speed),
function(){$(this).dequeue()}
}
);
};
})
}
})(jQuery);
参考来源：http://www.lanrenzhijia.com/nav/jquery-movebg-js-0209.html
上一条：
下一条：
版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
相关评论
发表评论