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.masonry瀑布流效果
May 25 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
Es6 Generator函数详细解析
2018/02/24 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python实现简单名片管理系统
2018/11/30 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
行政求职信
2014/07/04 职场文书
年终晚会活动方案
2014/08/21 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2015年前台文员工作总结
2015/05/18 职场文书