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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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
上海无线电三厂简史修改版
2021/03/01 无线电
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP 文件类型判断代码
2009/03/13 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
看了就知道什么是JSON
2007/12/09 Javascript
Javascript this指针
2009/07/30 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
Puppet的一些技巧
2018/09/17 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python unittest实现api自动化测试
2018/04/04 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python脚本调试工具安装过程
2021/01/11 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
2014年质检工作总结
2014/11/26 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书