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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
js微信分享API
2020/10/11 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
给护士表扬信
2014/01/19 职场文书
财务出纳岗位职责
2014/02/03 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL