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图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
随机推荐
- LeetCode Weekly Contest 117
已经正式在实习了,好久都没有刷题了(应该有半年了吧),感觉还是不能把思维锻炼落下,所以决定每周末刷一次LeetCode. 这是第一周(菜的真实,只做了两题,还有半小时不想看了,冷~). 第一题: 96 ...
- C语言实例：结构体
结构体: #include <stdio.h> #include <stdlib.h> //#pragma pack(1) typedef struct{ short i; / ...
- CEF 支持的命令行参数
参考:https://peter.sh/experiments/chromium-command-line-switches/ List of Chromium Command Line Switch ...
- EmberJS 为什么我偏爱 Ember.js 胜过 Angular 和 React.js
文章写的很老到,非常值得一看!评论也很精彩,值得一看 为什么我偏爱 Ember.js 胜过 Angular 和 React.js 前几天看到了这篇文章:Why I prefer Ember.js ov ...
- HDU 5919 Sequence II（主席树）题解
题意:有A1 ~ An组成的数组,给你l r,L = min((l + ans[i - 1]) % n + 1, (r + ans[i - 1]) % n + 1),R = max((l + ans[ ...
- python读Excel
import xlrd def open_excel(fileName="TransInfo.xlsx"): try: fileHandler = xlrd.open_workbo ...
- idea工具和激活码获取
1.下载最新的idea https://blog.csdn.net/mashuai720/article/details/79389314 2.获取激活码 最后一个有效,亲测 https://blog ...
- 解决 scapy “NameError: global name 'wrpcap' is not defined” 错误
解决 scapy "NameError: global name 'wrpcap' is not defined" 错误 通过 scapy 编写发包脚本时遇到如下错误: Trace ...
- vue数据变动监测
原文链接:https://blog.csdn.net/man_tutu/article/details/72148362 对象: 不能监测到: var vm = new Vue({ data:{ a: ...
- Java问题解决：springboot启动出现-Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package
参考资料: http://www.mamicode.com/info-detail-2101273.html https://blog.csdn.net/u012834750/article/deta ...