以下是 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=gb2312" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js" charset="gb2312"></script>
<title>jquery滚动下拉显示左右浮动导航</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="left_nav" id="left_nav">
<a href="http://www.baidu.com/" target="_blank" style="height:117px"></a>
<a href="http://www.baidu.com/" target="_blank" style="height:116px"></a>
<a href="http://www.baidu.com/" target="_blank" style="height:68px"></a>
<a href="http://www.baidu.com/" target="_blank" style="height:68px"></a>
<a href="http://www.baidu.com/" target="_blank" style="height:68px"></a>
<a href="http://www.baidu.com/" 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="http://www.baidu.com/" target="_blank" title="返回主页" style="width:152px;">返回主页</a>
<a href="http://www.baidu.com/" target="_blank" title="手机" style="width:105px;">手机</a>
<a href="http://www.baidu.com/" target="_blank" title="数码" style="width:103px;">数码</a>
<a href="http://www.baidu.com/" target="_blank" title="电脑" style="width:118px;">电脑</a>
<a href="http://www.baidu.com/" target="_blank" title="家电" style="width:111px;">大家电</a>
<a href="http://www.baidu.com/" target="_blank" title="家电" style="width:107px;">小家电</a>
<a href="http://www.baidu.com/" target="_blank" title="百货" style="width:103px;">百货</a>
<p style="padding-top:13px">
<a href="http://www.baidu.com/" target="_blank" title="旅游">旅游专场</a>
<a href="http://www.baidu.com/" target="_blank" title="送礼">送礼专场</a>
<a href="http://www.baidu.com/" target="_blank" title="会员">游戏专场</a>
<a href="http://www.baidu.com/" target="_blank" title="新人">新人专场</a>
<a href="http://www.baidu.com/" target="_blank" title="无线">无线专场</a>
<a href="http://www.baidu.com/" 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代码(zzsc.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
分享到微博
微信扫一扫
