jquery滚动下拉显示左右浮动导航.zip资源-CSDN文库

共7个文件

png：3个

html：1个

jpg：1个

版权申诉

69 浏览量 2022-11-21 11:31:49 上传评论收藏 139KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery滚动下拉显示左右浮动导航.zip （7个子文件）

jquery滚动下拉显示左右浮动导航

jquery滚动下拉显示左右浮动导航.jpg 37KB

jiaoben1917

css

zzsc.css 2KB

images

right_nav.png 13KB

bottom.png 14KB

left.png 52KB

index.html 4KB

jquery-1.5.1.min.js 83KB

<!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 style=" width:990px;height:6000px; margin:0 auto;text-align:center;background: #EEE;"><br /><br /><br /><br /><br /><br /> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> <div class="left_nav" id="left_nav"> <a href="http://www.moobnn.com/" target="_blank" style="height:117px"></a> <a href="http://www.moobnn.com/" target="_blank" style="height:116px"></a> <a href="http://www.moobnn.com/" target="_blank" style="height:68px"></a> <a href="http://www.moobnn.com/" target="_blank" style="height:68px"></a> <a href="http://www.moobnn.com/" target="_blank" style="height:68px"></a> <a href="http://www.moobnn.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.moobnn.com/" target="_blank" title="返回主页" style="width:152px;">返回主页</a> <a href="http://www.moobnn.com/" target="_blank" title="手机" style="width:105px;">手机</a> <a href="http://www.moobnn.com/" target="_blank" title="数码" style="width:103px;">数码</a> <a href="http://www.moobnn.com/" target="_blank" title="电脑" style="width:118px;">电脑</a> <a href="http://www.moobnn.com/" target="_blank" title="家电" style="width:111px;">大家电</a> <a href="http://www.moobnn.com/" target="_blank" title="家电" style="width:107px;">小家电</a> <a href="http://www.moobnn.com/" target="_blank" title="百货" style="width:103px;">百货</a> <p style="padding-top:13px"> <a href="http://www.moobnn.com/" target="_blank" title="旅游">旅游专场</a> <a href="http://www.moobnn.com/" target="_blank" title="送礼">送礼专场</a> <a href="http://www.moobnn.com/" target="_blank" title="会员">游戏专场</a> <a href="http://www.moobnn.com/" target="_blank" title="新人">新人专场</a> <a href="http://www.moobnn.com/" target="_blank" title="无线">无线专场</a> <a href="http://www.moobnn.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>

评论收藏

内容反馈

版权申诉