以下是 超过一定高度出现左右浮动导航及底部固定导航代码 的示例演示效果:
部分效果截图:
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=gb2312" />
<meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为超过一定高度出现左右浮动导航及底部固定导航代码，属于站长常用代码" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js" charset="gb2312"></script>
<title>超过一定高度出现左右浮动导航及底部固定导航代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<!-- 代码 开始 -->
<div style=" width:990px;height:6000px; margin:0 auto;text-align:center;background: #EEE;"><br /><br /><br /><br /><br /><br />
<p><p>超过一定高度出现左右浮动导航及底部固定导航代码，仿易迅网效果，有返回顶部按钮，兼容主流浏览器，程序员设计师联盟淘宝店推荐下载！</p><p><br /></p><p>使用方法：</p><p>1、将index.html中的代码粘贴到要显示的页面</p><p>2、加载CSS、JS文件</p><p>3、修改图片为自己的图片</p><p>4、右侧导航的锚点跳转，请根据自己网页的实际情况修改</p></p>
<p style="margin:20px 0"></p>
</div>
<div class="left_nav" id="left_nav">
<a href="#" target="_blank" style="height:117px"></a>
<a href="#" target="_blank" style="height:116px"></a>
<a href="#" target="_blank" style="height:68px"></a>
<a href="#" target="_blank" style="height:68px"></a>
<a href="#" target="_blank" style="height:68px"></a>
<a href="#" target="_blank" style="height:68px"></a>
</div>
<div class="float" id="float">
<a href="#1" class="an_1">导航1</a>
<a href="#2" class="an_2">导航2</a>
<a href="#3" class="an_3">导航3</a>
<a href="#4" class="an_4">导航4</a>
<a href="#5" class="an_5">导航5</a>
<a href="#6" class="an_6">导航6</a>
<a href="#7" class="an_7">导航7</a>
<a href="#8" class="an_8">导航8</a>
<a href="#9" class="an_9">导航9</a>
<a href="#10" class="an_10">导航10</a>
<a href="#11" class="an_11">导航11</a>
<a href="#top" class="an_12">导航12</a>
</div>
<div class="act_nav">
<div class="event_content">
<a href="#" target="_blank" title="返回主页" style="width:152px;">返回主页</a>
<a href="#" target="_blank" title="手机" style="width:105px;">手机</a>
<a href="#" target="_blank" title="数码" style="width:103px;">数码</a>
<a href="#" target="_blank" title="电脑" style="width:118px;">电脑</a>
<a href="#" target="_blank" title="家电" style="width:111px;">大家电</a>
<a href="#" target="_blank" title="家电" style="width:107px;">小家电</a>
<a href="#" target="_blank" title="百货" style="width:103px;">百货</a>
<p style="padding-top:13px">
<a href="#" target="_blank" title="旅游">旅游专场</a>
<a href="#" target="_blank" title="送礼">送礼专场</a>
<a href="#" target="_blank" title="会员">游戏专场</a>
<a href="#" target="_blank" title="新人">新人专场</a>
<a href="#" target="_blank" title="无线">无线专场</a>
<a href="#" target="_blank" title="会员">QQ会员</a>
</p>
</div>
</div>
</div>
<script type="text/javascript">
//浮动导航
function float_nav(dom){
var right_nav=$(dom);
var nav_height=right_nav.height();
function right_nav_position(bool){
var window_height=$(window).height();
var nav_top=(window_height-nav_height)/2;
if(bool){
right_nav.stop(true,false).animate({top:nav_top+$(window).scrollTop()},400);
}else{
right_nav.stop(true,false).animate({top:nav_top},300);
}
right_nav.show();
}
if(!+'\v1' && !window.XMLHttpRequest ){
$(window).bind('scroll resize',function(){
if($(window).scrollTop()>300){
right_nav_position(true);
}else{
right_nav.hide();
}
})
}else{
$(window).bind('scroll resize',function(){
if($(window).scrollTop()>300){
right_nav_position();
}else{
right_nav.hide();
}
})
}
}
float_nav('#float');
float_nav('#left_nav');
</script>
<!-- 代码 结束 -->
</body>
</html>
CSS代码(lrtk.css):
.act_nav{background:url(../images/bottom.png) no-repeat top center;height:74px;position:fixed;left:0;bottom:0;z-index:500;width:100%;}
.act_nav .event_content{height:74px;width:985px;margin:0 auto;text-align:left;position:relative;}
.act_nav .event_content a,.act_nav .event_content p{display:block;height:61px;float:left;text-indent:-9999px;outline:none;}
.act_nav .event_content p{width:170px;margin-left:10px;}
.act_nav .event_content p a{width:77px;height:20px;margin-left:5px;}
/*右侧悬浮导航*/
.float{width:111px;height:504px;position:fixed;left:50%;_position:absolute;display:none;overflow:hidden;margin-left:515px;z-index:50}
/*left50%确保页面中间，左边距515大于页面内容的一半，确保在内容整体右侧外*/
.float a{display:block;text-indent:-9999px;overflow:hidden;height:42px;background:url(../images/right_nav.png) no-repeat;-webkit-transition:background 0.2s ease}
.float .an_1:hover{background-position:-111px 0}
.float .an_2{background-position:-222px 0}
.float .an_2:hover{background-position:-333px 0}
.float .an_3{background-position:-444px 0}
.float .an_3:hover{background-position:-555px 0}
.float .an_4{background-position:-666px 0}
.float .an_4:hover{background-position:-777px 0}
.float .an_5{background-position:-888px 0}
.float .an_5:hover{background-position:-999px 0}
.float .an_6{background-position:-1110px 0}
.float .an_6:hover{background-position:-1221px 0}
.float .an_7{background-position:-1332px 0}
.float .an_7:hover{background-position:-1443px 0}
.float .an_8{background-position:-1554px 0}
.float .an_8:hover{background-position:-1665px 0}
.float .an_9{background-position:-1776px 0}
.float .an_9:hover{background-position:-1887px 0}
.float .an_10{background-position:-1998px 0}
.float .an_10:hover{background-position:-2109px 0}
.float .an_11{background-position:-2442px 0}
.float .an_11:hover{background-position:-2553px 0}
.float .an_12{background-position:-2220px 0}
.float .an_12:hover{background-position:-2331px 0}
/*右侧悬浮*/
.left_nav{width:109px;height:503px;position:fixed;left:50%;margin-left:-630px;z-index:1000;display:none;background:url(../images/left.png) no-repeat}
.left_nav a{display:block}
分享到QQ
分享到微博
微信扫一扫
