jquery鼠标悬停导航下划线滑出效果


Posted in jQuery onSeptember 29, 2017

本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery鼠标悬停导航下划线滑出效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.header{ width:100%; background:#F5F5F5;}
.nav{ width:1000px; margin:0 auto; overflow:hidden;}
.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#000; text-decoration:none;}
.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#1FAEFF; top:58px; left:50%;}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li><a>首页</a><span></span></li>
<li><a>菜单导航</a><span></span></li>
<li><a>时间日期</a><span></span></li>
<li><a>焦点图</a><span></span></li>
<li><a>tab标签</a><span></span></li>
<li><a>jquery特效</a><span></span></li>
<li><a>相册代码</a><span></span></li>
<li><a>图片特效</a><span></span></li>
<li><a>名站特效</a><span></span></li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.nav li').hover(function(){
$('span',this).stop().css('height','2px');
$('span',this).animate({
left:'0',
width:'100%',
right:'0'
},200);
},function(){
$('span',this).stop().animate({
left:'50%',
width:'0'
},200);
});
});
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python实现ip代理池功能示例
2019/07/05 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
还款承诺书范文
2014/05/20 职场文书
机动车登记业务委托书
2014/10/08 职场文书
学习十八大宣传标语
2014/10/09 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
预备党员入党感言
2015/08/01 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js