JQuery 浮动导航栏实现代码


Posted in Javascript onAugust 27, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JQuery 浮动导航栏</title> 
<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery-1.3.2.min.js"></script> 
<style type="text/css"> 
/* 浮动导航栏 Begin */ 
#floatMenu 
{ 
padding-top: 5px; 
background: url(http://img.3water.com/images/quickmenu.gif) no-repeat; 
border: 1px solid #dcdcdc; 
position: absolute; 
top: 250px; 
left: 5px; 
margin-left: 0px; 
width: 86px; 
} 
#floatMenu ul 
{ 
margin-left: 0px; 
background-color:White; 
list-style-type: none; 
padding:10px } 
#floatMenu ul li a 
{ 
display: block; 
text-decoration: none; 
color: #000; 
} 
#floatMenu ul li a:hover 
{ 
color: #fff; 
background-color: #ff8000; 
} 
#floatMenu ul.menu1 li a:hover 
{ 
border-color: #09f; 
} 
/* 浮动导航栏 End */ 
</style> 
</head> 
<body> 
<div id="floatMenu"> 
<ul class="menu1"> 
<li><a href="#" onclick="return false;">Home</a></li> 
<li><a href="#" onclick="return false;">About Us</a></li> 
<li><a href="#" onclick="return false;">Product</a></li> 
<li><a href="#" onclick="return false;">Contact</a></li> 
</ul> 
</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /> 
<script type="text/javascript"> 
//<![CDATA[ 
var name = "#floatMenu"; 
var menuYloc = null; 
$(document).ready(function() { 
menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px"))) 
$(window).scroll(function() { 
offset = menuYloc + $(document).scrollTop() + "px"; 
$(name).animate({ top: offset }, { duration: 500, queue: false }); 
}); 
}); 
//]]> 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
微信小程序实现红包雨功能
Jul 11 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
基于JavaScript实现年月日三级联动
Jun 22 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 #Javascript
JSON 客户端和服务器端的格式转换
Aug 27 #Javascript
动态表格Table类的实现
Aug 26 #Javascript
javascript 函数调用规则
Aug 26 #Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 #Javascript
javascript 继承实现方法
Aug 26 #Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 #Javascript
You might like
php通过COM类调用组件的实现代码
2012/01/11 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
百度移动版的url编码解码示例
2014/04/29 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
javascript实现计算器功能
2020/03/30 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
vue实现登录拦截
2020/06/29 Javascript
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python re模块的高级用法详解
2018/06/06 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
英文求职信范文
2014/05/23 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
党员发展大会主持词
2015/07/03 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python