JQ菜单滑块
网站导航滑块效果：
复制以下代码保存到html文件中即可查看效果...
<html>
<head>
<title>JQ菜单滑块</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.nav{
width:605px;
height:50px;
background-color:#999;
position:relative;
}
.nav>ul{
width:100%;
height:100%;
background-color:#177cb0;
list-style:none;
float:left;
margin: 0;
padding: 0;
}
.nav>ul>li{
width:100px;
height:50px;
line-height:50px;
float:left;
background-color:#666;
text-align:center;
margin-left:1px;
color:#fff;
}
.nav>ul>li:first-child{
margin-left:0;
}
.fmove{
width:100px;
height:5px;
position:absolute;
z-index:10;
left:0;
bottom:0;
background-color:blue;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head>
<body>
<div class="nav">
<ul>
<li>首页</li>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
<div class="fmove"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
var tt;
$(".nav>ul>li").hover(function(){
clearTimeout(tt);
var lft = $(this).position().left;
tt = setTimeout('$(".fmove").animate({left:' + lft + '})',450);
});
$(".nav").mouseleave(function(){
clearTimeout(tt);
tt = setTimeout('$(".fmove").animate({left:0})',650);
});
});
</script>
JQ菜单滑块的更多相关文章
- jq菜单折叠效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 数据的随机抽取 及 jQuery补充效果（菜单、移动）
一.数据的随机抽取 都见过那种考试题从很多题中随机抽取几道的试卷吧,现在就要做这样的一个例子:从数据库中随机抽取几条数据出来显示(例如:一百中随机挑选50条) 随机挑选是要有提交数据的,所以肯定是要有 ...
- JQ滑动导航菜单的实现
前言:不多说直接看效果!!! 这样的菜单我们在一般的网站上见到的也比较多,有比较好的用户体验! 原理:这个很重要,任何的特效只要原理搞明白了,实现起来都是很容易的!这个特效的原理很简单,菜单的样式 ...
- jq倾斜的动画导航菜单
效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...
- JQ写简单的伸缩菜单（内附效果图和源代码）
效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- 自写JQ控件-树状菜单控件[demo下载]
一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...
- Jq写个联级菜单
这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
随机推荐
- java面向对象总结(二)
Java 封装 实现Java封装的步骤 java面向对象值继承 概念: 继承的格式: 类和类之间的关系: 继承的特点: 继承的优缺点 继承的好处: 继承的缺点: 继承的注意事项: 使用继承的步骤: J ...
- 文件下载的ie11兼容性优化
在 http://www.cnblogs.com/sunshine6/p/8296945.html 中有说关于前后端分离时如何实现文件下载的功能,但是过完年回来,同事告诉我这个方式在ie11上存在不兼 ...
- 原创《weex面向未来的架构》
最近一直在做weex的调研工作,整理之后给公司做了一次技术分享. 分享内容如下: 1:Weex是什么? 2: Weex目前能做什么? 3: Weex 如何调试 4: 剖析一下Weex原理 5: ...
- Spring发送邮件
Spring邮件发送流程:第一步:邮件发送,需要一个邮件服务器.可以使用腾讯获得网易的邮件服务器.登录邮箱,点击左上角的设置,再点击账号 找到下列选项,点击开启,需要发短信验证,或者使用QQ安全登录扫 ...
- python面对对象
面对过程VS面对对象 面向过程的程序设计的核心是过程,过程就是解决问题的步骤,面向过程的设计就是考虑周全什么时候处理什么东西 优点:极大的降低了写程序的复杂度,只需要顺着要执行的步骤,堆叠代码即可. ...
- qt界面操作
//控制死窗体 int width = this->geometry().width(); int height = this->geometry().height(); this-> ...
- 【JavaScript】标准日期、中国标准时间、时间戳、毫秒数互转
转载自:https://blog.csdn.net/IT429/article/details/78341847 看到的一篇比较有用的前端js时间转换方法,留个备份 首先要明确这三种格式是什么样子的: ...
- BUTXO详解
在比原链中,每个交易消耗之前交易生成的BUTXO 然后生成新的 BUTXO,账户的余额即所有属于该地址的未花费 BUTXO 集合,BTM 的全局状态即当前所有未花费的BUTXO 集合.我们用一个具体的 ...
- Use SourceLink enables a great source debugging experience
posts Exploring .NET Core's SourceLink - Stepping into the Source Code of NuGet packages you don't o ...
- 从零开始 CentOs 7 搭建论坛BBS Discuz_X3.2
由于公司项目需要一个互动平台,可以发起活动,发消息留言,讨论过后发现这竟然是一个论坛的功能. 于是就不打算耗费功夫开发相关功能,直接另外搭一套BBS算球... 一直觉得搭建BBS不是一件难事,目前有很 ...