以下是 jquery右侧浮动导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=UTF-8" />
<title>jquery右侧浮动导航</title>
<script language="javascript" src="js/jquery_mini.js"></script>
<script language="javascript" src="js/jquery.dimensions.js"></script>
<script language="javascript">
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>
<link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-wrap">
<div id="content">
<h1>Live Demo</h1>
<p class="first">The page is longer than it would really need to be to allow you to notice how the menu behave when it crosses content or graphics.</p>
<p>Nulla imperdiet, enim non pellentesque imperdiet, nisl lacus condimentum metus, et gravida erat nisl ac nulla. Aliquam semper eleifend massa. Maecenas et eros. Donec nibh sem, laoreet et, consequat vel, vestibulum sit amet, orci. Curabitur semper bibendum neque. Suspendisse potenti. Cras lacinia diam in orci. Nullam orci lacus, placerat et, gravida at, iaculis sit amet, augue. Morbi faucibus. Morbi bibendum. Donec massa. Vivamus ut purus. Nunc nec urna nec diam rutrum lacinia. Ut eu nunc non enim consectetuer hendrerit. Nullam suscipit molestie enim. Proin et felis. Praesent vestibulum interdum est.</p>
<p>In pulvinar. Aenean at mauris. Maecenas volutpat, leo elementum ultrices laoreet, augue purus euismod arcu, vitae tempor urna lectus vitae nisi. Nam aliquet, pede ac fermentum aliquam, libero mauris elementum tellus, a malesuada arcu diam a eros. Aenean ligula. Nunc pharetra. Donec ultrices ultricies quam. Sed fringilla, mi nec gravida rutrum, tortor erat volutpat odio, pharetra egestas neque purus a est. Sed lobortis purus. Nunc in diam in velit consectetuer pellentesque. Nullam facilisis semper augue. Sed ullamcorper magna nec massa. Sed blandit commodo magna. Sed purus dui, cursus nec, interdum at, ullamcorper at, felis. Etiam tempor porta eros.</p>
<p class="longer">Donec tempor, ante ac iaculis euismod, enim enim vulputate magna, sed vulputate turpis enim vitae mi. Nam elementum rutrum augue. Sed pretium, urna sit amet dictum scelerisque, lectus nunc euismod dui, vitae molestie magna ante ornare augue. Vestibulum non augue dignissim nisl vestibulum adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ultrices leo ultricies nisi. Duis sed nibh. Phasellus in metus a nibh lobortis interdum. In nisi eros, cursus quis, tempor et, pellentesque ut, erat. Vivamus scelerisque nisl eget lectus. Nunc a mi. Nullam ut felis. Nunc convallis, lacus eget facilisis condimentum, ante justo viverra sapien, ac rutrum felis metus in nibh. Fusce bibendum. Curabitur euismod, leo quis blandit feugiat, risus enim tempus elit, eget ultricies odio nisi id purus. Aliquam dapibus hendrerit arcu. Praesent bibendum, turpis sit amet viverra luctus, nulla magna imperdiet leo, et accumsan eros elit eu lacus.</p>
<p>Maecenas facilisis congue libero. Maecenas ac risus. Donec sagittis sodales enim. Nam accumsan feugiat augue. Donec orci elit, elementum vitae, condimentum ut, iaculis a, magna. Vivamus at mauris et augue iaculis auctor. Suspendisse in ligula. Aenean malesuada, eros et porttitor eleifend, lacus nunc feugiat mauris, eu tristique leo mauris at velit. Nulla vulputate purus at dui. Ut porta accumsan mauris. Curabitur sed dolor non augue cursus consectetuer. Fusce felis. Nulla consequat, justo non pretium congue, urna sapien faucibus tortor, tristique faucibus mi metus imperdiet dui. Curabitur venenatis scelerisque purus. Curabitur nisi. Nam vehicula odio in leo convallis tristique. Vestibulum quis massa vel lacus laoreet egestas. Etiam nisi. Aenean non lacus. </p>
</div>
</div>
<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> Table of content </a></li>
<li><a href="#" onclick="return false;"> Exam </a></li>
<li><a href="#" onclick="return false;"> Wiki </a></li>
</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>
</body>
</html>
JS代码(jquery.dimensions.js):
/* �������������֮�� lanrenzhijia.com */
(function($){
$.dimensions ={
version:'@VERSION'}
;
// Create innerHeight,innerWidth,outerHeight and outerWidth methods$.each( [ 'Height','Width' ],function(i,name){
// innerHeight and innerWidth$.fn[ 'inner' + name ] = function(){
if (!this[0]) return;
var torl = name == 'Height' ? 'Top':'Left',// top or left borr = name == 'Height' ? 'Bottom':'Right';
// bottom or rightreturn this.css('display') != 'none' ? this[0]['client' + name]:num( this,name.toLowerCase() ) + num(this,'padding' + torl) + num(this,'padding' + borr);
}
;
// outerHeight and outerWidth$.fn[ 'outer' + name ] = function(options){
if (!this[0]) return;
var torl = name == 'Height' ? 'Top':'Left',// top or left borr = name == 'Height' ? 'Bottom':'Right';
// bottom or rightoptions = $.extend({
margin:false}
,options ||{
}
);
var val = this.css('display') != 'none' ?this[0]['offset' + name]:num( this,name.toLowerCase() )+ num(this,'border' + torl + 'Width') + num(this,'border' + borr + 'Width')+ num(this,'padding' + torl) + num(this,'padding' + borr);
return val + (options.margin ? (num(this,'margin' + torl) + num(this,'margin' + borr)):0);
}
;
}
);
// Create scrollLeft and scrollTop methods$.each( ['Left','Top'],function(i,name){
$.fn[ 'scroll' + name ] = function(val){
if (!this[0]) return;
return val != undefined ?// Set the scroll offsetthis.each(function(){
this == window || this == document ?window.scrollTo(name == 'Left' ? val:$(window)[ 'scrollLeft' ](),name == 'Top' ? val:$(window)[ 'scrollTop' ]()):this[ 'scroll' + name ] = val;
}
):// Return the scroll offsetthis[0] == window || this[0] == document ?self[ (name == 'Left' ? 'pageXOffset':'pageYOffset') ] ||$.boxModel && document.documentElement[ 'scroll' + name ] ||document.body[ 'scroll' + name ]:this[0][ 'scroll' + name ];
}
;
}
);
$.fn.extend({
position:function(){
var left = 0,top = 0,elem = this[0],offset,parentOffset,offsetParent,results;
if (elem){
// Get *real* offsetParentoffsetParent = this.offsetParent();
// Get correct offsetsoffset = this.offset();
parentOffset = offsetParent.offset();
// Subtract element marginsoffset.top -= num(elem,'marginTop');
offset.left -= num(elem,'marginLeft');
// Add offsetParent bordersparentOffset.top += num(offsetParent,'borderTopWidth');
parentOffset.left += num(offsetParent,'borderLeftWidth');
// Subtract the two offsetsresults ={
top:offset.top - parentOffset.top,left:offset.left - parentOffset.left}
;
}
return results;
}
,offsetParent:function(){
var offsetParent = this[0].offsetParent;
while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && $.css(offsetParent,'position') == 'static') )offsetParent = offsetParent.offsetParent;
return $(offsetParent);
}
}
);
function num(el,prop){
return parseInt($.curCSS(el.jquery?el[0]:el,prop,true))||0;
}
;
}
)(jQuery);
/* �������������֮�� lanrenzhijia.com */
CSS代码(lanrenzhijia.css):
@charset "UTF-8";/* 代码整理：懒人之家 lanrenzhijia.com */
body{background-color:#000;height:2000px;color:#ccc;font:10px "Lucida Grande","Lucida Sans","Trebuchet MS",verdana,sans-serif;}
#floatMenu{position:absolute;top:150px;left:50%;margin-left:235px;width:200px;}
#floatMenu ul{margin-bottom:20px;}
#floatMenu ul li a{display:block;border:1px solid #999;background-color:#222;border-left:6px solid #999;text-decoration:none;color:#ccc;padding:5px 5px 5px 25px;}
#floatMenu ul li a:hover{color:#fff;background-color:#333333;}
#floatMenu ul.menu1 li a:hover{border-color:#09f;}
#floatMenu ul.menu2 li a:hover{border-color:#9f0;}
#floatMenu ul.menu3 li a:hover{border-color:#f09;}
a{color:#FF0099;}
#page-wrap{border-right:1px solid #444;border-left:1px solid #444;width:900px;margin:0 auto;background-color:#222;color:#ffffff;font-family:"Lucida Grande","Lucida Sans","Trebuchet MS",verdana,sans-serif;}
#page-wrap #header{background-color:#444;padding-top:20px;padding-bottom:30px;}
#page-wrap #header h1{margin-left:45px;font-size:2.8em;margin-bottom:10px;line-height:0.9em;}
#page-wrap #header h2{margin-left:45px;font-size:1.7em;}
#page-wrap #content{background:url(../images/content_bg.jpg) no-repeat;padding-top:85px;}
#page-wrap #content h1{margin-left:45px;font-size:2em;margin-bottom:10px;}
#page-wrap #content p{margin-left:45px;width:620px;text-align:justify;margin-bottom:25px;line-height:1.5em;}
#page-wrap #content p.first{font-size:1.2em;font-weight:bold;}
#page-wrap #content p.longer{width:810px;}
#page-wrap #footer{background-color:#444;}
#page-wrap #footer p{width:auto;margin:auto;text-align:center;font-size:0.9em;border:1px solid #000;padding:15px 0;}
#page-wrap #footer a:link{color:#09f;}
#page-wrap #footer a:visited{text-decoration:none;}
#page-wrap #footer a:hover{color:#0f9;}
#page-wrap #footer a:active{color:#f90;}
分享到QQ
分享到微博
微信扫一扫
