<!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 hover事件导航条 - js特效</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//擦除效果
jQuery.extend(jQuery.easing,
{
easeOutBack: function (x, t, b, c, d, s) {
s = s || 1.3;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
});
//nav初始化选中
var navCurr = $("#navCurr");
$("#navSelected").css("left", navCurr[0].offsetLeft);
//nav里的链接hover效果
$("#navBd li").hover(function(){
if(!!$("#navSelected").stop(true).animate({left:$(this)[0].offsetLeft}, 400, "easeOutBack")) {
$(this).siblings().removeClass("navHover").end().addClass("navHover");
$(this).find("a").hide().fadeIn(300);
}
}, function(){
$(this).removeClass("navHover");
$("#navCurr").addClass("navHover");
//window.setTimeout(function(){$("#navCurr").parent().addClass("navHover")},100);
$("#navSelected").stop(true).animate({left:navCurr[0].offsetLeft}, 300, "easeOutBack");
}
);
})
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;color:#333;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.clearfix:after{visibility: hidden; display: block; clear: both; height: 0; font-size: 0; content: ".";}
.clearfix{zoom:1;}
.nav {position:relative;width:700px;height:38px;overflow:hidden;line-height:38px;font-size:14px;margin:40px auto 0 auto;}
.nav li{float:left;display:inline;width:100px;height:39px; ine-height:33px;text-align:center;}
.nav a:hover{text-decoration:none;}
#navBd{position:relative;}
.navHover a{display:inline-block;color:#fff;}
#navSelected{position:absolute;top:0;width:100px;height:39px; ine-height:33px;background:url(images/header.png) no-repeat 0 0;}
</style>
</head>
<body>
<div class="nav">
<div id="navSelected" class="navSelected"></div>
<ul id="navBd" class="clearfix">
<li id="navCurr" class="navHover"><a href="#">网站首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">网站维护</a></li>
<li><a href="#">网站改版</a></li>
<li><a href="#">网站优化</a></li>
<li><a href="#">成功案例</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</div>
</body>
</html>
jquery实现的hover事件导航条特效源码.zip
版权申诉
101 浏览量
2022-11-07
23:54:00
上传
评论
收藏 23KB ZIP 举报
易小侠
- 粉丝: 6474
- 资源: 9万+
最新资源
- uniapp中tab切换,底部内容跟着移动,相反,底部移动,tab也跟着切换-组件
- 基于JS+TS实现跨平台3D相机控制器-附项目源码-优质项目分享.zip
- 跨相机-基于Rust实现的跨平台相机捕获-附项目源码-优质项目分享.zip
- odise 14离线安装包 大众斯柯达奥迪 5054 6153
- 网页设计期末作业-纯html加css+少量js-盗墓笔记旅游导航网站.rar
- 算法笔记模拟退火.rar
- MATLAB大数据仿真案例-蚁群算法(ACO)用于求解旅行商(TSP)问题.rar
- 基于yolov5的吸烟行为检测源码+模型.zip
- MySQL基础知识-个人笔记.rar
- Project8.ipynb
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈