jquery導航置頂_網頁特效代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> jquery導航置頂

jquery導航置頂

編輯：網頁特效代碼

效果體驗:
http://hovertree.com/texiao/jquery/6.htm

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導航置頂 - HoverTree</title><base target="_blank" />
<link href="http://hovertree.com/texiao/jquery/6/css/base.css" rel="stylesheet" type="text/css" />
<link href="http://hovertree.com/texiao/jquery/6/css/html5s.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style>
body{text-align:center;}
.nav-wrap{}
/* Clearfix */
.group:after{visibility:hidden;display:block;content:"";clear:both;height:0}
*:first-child+html .group{zoom:1} /* IE7 */
/* Example One */
#example-one{margin:0 auto;list-style:none;position:relative;}
#example-one li{display:inline-block; line-height: 35px;}
#example-one a{color:#5D5D5D;font-size:16px;float:left;padding:0px 20px 15px 20px; margin-top:-3px;text-decoration:none;text-transform:uppercase}
#example-one a:hover{color: black;}
#magic-line{position:absolute;bottom:-2px;left:0;width:100px;height:2px;background:#FF0000}
.current_page_item a{}
.ie6 #example-one li, .ie7 #example-one li{display:inline}
.ie6 #magic-line {bottom:-3px}
/**右邊滑動**/
.relativeall{position: fixed; right: 10px; bottom: 300px; width: 50px; height: 26px; text-align: center; border-radius: 2px; z-index: 100;}
.relativealls{position: relative;display: block;cursor: pointer;background-color: rgba(0,0,0,0.5);width: 100%;height: 40px;padding: 4px;border-bottom: 1px solid rgba(255,255,255,0.1);}
.relativeall-img{position: absolute; display: none; right: 80px; bottom: 0;}
.relativealls-top{background-color: #000;opacity: 0.5;padding: 4px;bottom: 180px;height: 40px;cursor: pointer;
position: fixed;right: 2px;width: 50px;text-align: center;z-index: 100;}
</style>
</head>
<body style="position: relative;">

<script>
$(document).ready(function(){
$(".relativealls").hover(function(){
$(this).css("background","rgba(0,0,0,0.6)");
$(this).find(".relativeall-img").fadeIn(500);
},function(){
$(this).css("background","rgba(0,0,0,0.5)");
$(this).find(".relativeall-img").fadeOut(500);
});
$(".relativealls-top").hover(function(){
$(this).css("opacity","0.6");
},function(){
$(this).css("opacity","0.5");
});
$(".imgclicks").live("click",function(){
$("html,body").animate({scrollTop:0});
});
});
</script>

<div id="maintop">
<div class="tops">
<div class="maintop" style="margin:0px auto">
<div class="logo2"><a href="http:///"><img style="height:48px" src="http:///images/logo.gif" /></a></div>
<div class="tops-center">
<div class="nav-wrap">
<ul class="" id="example-one">
<li class="current_page_item"> <a href="http://hovertree.com/">首頁</a></li>
<li id="jpjsw"> <a href="http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm">產品介紹</a></li>
<li id="solutions"> <a href="http://hovertree.com/menu/csharp/">互聯網+</a>
</li>
<li> <a href="http://hovertree.com">商城模板</a></li>
<li> <a href="http:///a/bjae/bnco7hj3.htm">手機端</a></li>
<li> <a target="_blank" href="http:///keleyi/phtml/">定制商城</a></li>

<li style="width: 72px; left: 0px; overflow: hidden;" id="magic-line"></li></ul>

</div>
<div class="cpjs" id="jpjs" style="display: none;">
<ul>
<li><a href="http://tool./">B2C獨立商城系統</a></li>
<li><a href="http://hovertree.com">多用戶商城系統</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/i1qo2kg6.htm">微分銷商城系統</a></li>
<li><a href="http://hovertree.com">連鎖百貨商城系統</a></li>

<li><a href="http://hovertree.com/guestbook/">樂雲派電商 ERP</a></li>
</ul>
</div>
<div class="soluion" id="solu" style="display:none">
<dl>
<dt>業務解決方案：</dt>
<dd><a href="http://hovertree.com/hvtart/bjae/nh0pk7kc.htm">O2O電商解決方案</a></dd>
<dd><a href="http://hovertree.com">多商戶平台解決方案</a></dd>
<dd><a href="http://hovertree.com/hvtart/bjae/akln9gw2.htm">全渠道營銷解決方案</a></dd>
<dd><a href="http://hovertree.com"> B2B經銷商報貨解決方案</a></dd>
<dd><a href="http://hovertree.com/hvtimg/"> IPTV電視購物解決方案</a></dd>

</dl>
<dl>
<dt>：</dt>
<dd><a href="http:///a/bjae/sn78qmtf.htm">家居行業解決方案</a></dd>
<dd><a href="http:///ziliao/googlejavascriptstyle.htm">生鮮行業解決方案</a></dd>
<dd><a href="http://hovertree.com/hvtart/bjae/7xlu0jc6.htm">原文</a></dd>
<dd><a href="http://hovertree.com/shortanswer/"> 數碼家電行業解決方案</a></dd>
<dd><a href="http://hovertree.com"> 互聯網金融行業解決方案</a></dd>

</dl>
</div>
</div>
<script>
$("#solutions").hover(function(){
$("#solu").css("display","block");
},function(){
$("#solu").css("display","none");
});
$("#solu").hover(function(){
$("#solu").css("display","block");
},function(){
$("#solu").css("display","none");
});
$("#jpjsw").hover(function(){
$("#jpjs").css("display","block");
},function(){
$("#jpjs").css("display","none");
});
$("#jpjs").hover(function(){
$("#jpjs").css("display","block");
},function(){
$("#jpjs").css("display","none");
});
</script>
</div>

</div>

</div>

  http:// ------------
 
 
 
 
 
 
 
 
 
請滾動鼠標輪
 
  http:/// ------------
 
 
 
 
 
 
 
  http:/// ------------
 
 
 
 
 
  http:/// ------------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  http:/// ------------
 
 
 
 
 
 
 
 
 
  http:// ------------
 
 
 
 
 
 
 
 
 
 
 
 
  http:// ------------
 
 
 
 
 
 
 
 
 
 
 
 
 
  http:// ------------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  http:// ------------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  http:// ------------
 
 
 
 
 
<div style="width:100%;height:500px;"></div>

</body></html>

上一頁:CSS設置DIV縮放背景自適應(不變形)
下一頁:現代舞舞蹈家瑪莎·葛蘭姆動畫Logo

網頁特效代碼

jQuery時間軸進度圖片和文字描述播放: 查看效果：http://hovertree.com/texiao/jquery/75/源代碼下載：h
純HTML和CSS3畫QQ的Logo: CSS3繪制騰訊LOGO效果展示代碼如下：<!doctype html><html
原生js漸變滑動切換焦點圖: js圖片漸變和移動切換，有箭頭和分頁圓點效果展示代碼如下：<!DOCTYPE html>

前端技巧關於網頁技巧 WEB前端代碼網頁特效代碼

小編推薦

HTML5 canvas時鐘 jQuery實現玩家幸運抽獎活動原生js漸變滑動切換焦點圖 EasyUI彈出窗口實例使用SyntaxHighlighter著色，使代碼高亮 grumble.js氣泡jQuery特效 jQuery仿百度豎直tab切換效果代碼 jQuery帶縮略圖的圖片切換 JS縱軸圓點的圖片輪播切換 JS實現管理後台多標簽打開關閉模板

DIV CSS 佈局教程網

相關文章