JQuery 浮动导航栏实现代码
作者:bea
代码如下: <!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" c
代码如下:
<!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./jslib/jquery/jquery-1.3.2.min.js"></script>
<style type="text/css">
/* 浮动导航栏 Begin */
#floatMenu
{
padding-top: 5px;
background: url(http://img./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>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js 获取浏览器高度和宽度值(多浏览器)
- 获取URL地址中的文件名和参数的javascript代码
- Javascript 判断函数类型完美解决方案
- javascript 控制 html元素 显示/隐藏实现代码
- jsTree树控件(基于jQuery, 超强悍)[推荐]
- JavaScript 继承详解 第一篇
- JavaScript 应用技巧集合[推荐]
- 用cssText批量修改样式
- javascript appendChild,innerHTML,join性能比较代码
- IE 条件注释详解总结(附实例代码)
- JavaScript 事件监听实例代码[兼容IE,firefox] 含注释
- 基于jQuery的ajax功能实现web service的json转化
- 用户注册常用javascript代码
- csdn 博客中实现运行代码功能实现
- js 分栏效果实现代码
- javascript 简练的几个函数
- 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- javascript 遍历验证所有文本框的值