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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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
图形数字验证代码
2006/10/09 PHP
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
将python代码和注释分离的方法
2018/04/21 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python ubplot使用方法解析
2020/01/10 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
Shell如何接收变量输入
2012/09/24 面试题
关于环保的演讲稿
2014/05/10 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
部队个人年终总结
2015/03/02 职场文书
圣诞晚会主持词
2015/07/01 职场文书
班主任工作总结范文
2015/08/13 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python