jQuery實作可關閉固定於底（頂）部的工具條選單效果-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作可關閉固定於底（頂）部的工具條選單效果

PHPz

May 16, 2016 pm 03:33 PM

jquery可關閉固定

這篇文章主要介紹了jQuery實現可關閉固定於底（頂）部的工具條選單效果,可實現固定位置顯示及響應滑鼠點擊展開與關閉的功能,涉及jQuery響應滑鼠事件動態操作頁面元素樣式屬性的相關技巧,需要的朋友可以參考下

本文實例講述了jQuery實現可關閉固定於底（頂）部的工具條選單效果。分享給大家供大家參考，具體如下：

這是一款可關閉始終在頁面底部的工具條菜單，浮動在頁面頂部的大家見的比較多了，本款從形式上來說與其它的沒什麼差別，只是浮動在頁面的最底部，帶一關閉按鈕，一般來說，此效果可用作廣告條、網站提示以及一些需要用戶特別注意的地方。

運作效果截圖如下：

線上簡報網址如下：

http://demo.jb51.net/ js/2015/jquery-fixed-buttom-adv-line-codes/

具體程式碼如下：

<!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>
<title>固定底（顶）部菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.bnav{ text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff; margin:0 1%;border:#B4B4B4 1px solid; border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
.close a{background:url(images/close.gif) no-repeat center; width:16px;display:block;}
.bnav2{height:24px;line-height:24px; margin:1px; margin-bottom:0;background:#E5E5E5; }
.bnav .s1{ position:absolute;left:10px;}
.bnav .s1 img{ padding-top:3px;margin-right:7px;}
.bnav .s2{ position:absolute;right:30px; color:#888;}
.bnav .s2 span{ padding-right:10px;}
.bnav .s2 a{margin:0 6px;}
.rolltext{position:absolute;left:160px;height:25px;line-height:25px; overflow: hidden;}
.rolltext dt,.rolltext dd{float:left;width: auto;}
.rolltext a{display:block;height:25px;overflow:hidden;}
.bnav3{height:25px;width:16px;line-height:25px; margin:0 1%; padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
.bnav3 a{background:url(images/open.gif) no-repeat center; display:block;height:25px;width:16px; text-indent:-5000px;}
</style>
</head>
<body>
<script type="text/javascript">
var closeBN = $.cookie("bnav"); 
if (closeBN == "0"){closeNav();}
function showNav(){
  $(".openClose").toggle();
  $.cookie("bnav", "1", {expires: 1}); 
}
function closeNav(){
  $(".openClose").toggle();
  $.cookie("bnav", "0", {expires: 1});
}
// 单行滚动
function SingleScroll(){
  $(".rolltext dd").animate({marginTop:"-25px"},500,function(){
    $(this).css({marginTop:"0px"}).find("a:first").appendTo(this);
  });
}
$(document).ready(function(){
  setInterval("SingleScroll()",3000);
});
</script>
<p class="bnav openClose">
 <p class="bnav2">
  <span class="s1">
   <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/qqonline.gif"  class="lazy"   alt="jQuery實作可關閉固定於底（頂）部的工具條選單效果" ></a><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/qqonline2.gif"  class="lazy"   alt="jQuery實作可關閉固定於底（頂）部的工具條選單效果" ></a>
  </span>
  <dl class="rolltext">
   <dt>特别声明：</dt>
   <dd>
    <a href="#">庆双节期间，商城有专人值班，请上帝们放心购物</a>
    <a href="#">天悦所售手机为大陆行货、全国联保商品</a>
    <a href="#">部分少量港行、欧行机器我们都已特别注明</a>
    <a href="#">请上帝们就不要再咨询同类问题啦，客服电话要爆喽</a>
   </dd>
  </dl>
  <span class="s2">
   <span><a href="#">[登录]</a><a href="#">[免费注册]</a></span><a href="#">购物车</a>|<a href="#">帮助中心</a>|<a href="#">在线留言</a>
  </span>
  <span class="close"><a href="javascript:void(0)" onclick="closeNav()" title="关闭">关闭</a></span>
 </p>
</p>
<p class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打开">打开</a></p>
</body>
</html>

以上就是本章的全部內容，更多相關請訪問jQuery視頻教程！

陳述

本文轉載於：脚本之家。如有侵權，請聯絡admin@php.cn刪除

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。