jquery插件實(shí)現(xiàn)懸浮的菜單

更新時(shí)間：2021年04月23日 17:09:54 作者：阿飛超努力

這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)懸浮的菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

每天學(xué)一個(gè)jquery插件-懸浮的菜單，供大家參考，具體內(nèi)容如下

懸浮的菜單

又是一個(gè)很常見(jiàn)的效果，用上了a標(biāo)簽的一個(gè)常見(jiàn)的特性-錨點(diǎn)

效果如下

代碼部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>懸浮的菜單</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    user-select: none;
   }
   .item{
    border: 1px solid lightgray;
    margin: 10px;
    height: 400px;
    border-radius: 5px;
    position: relative;
   }
   .head{
    background-color: lightgray;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-indent: 10px;
    position: absolute;
    top: 0px;
    width: 100%;
   }
   .fbox{
    position: fixed;
    top: 20%;
    bottom: 20%;
    right: 20px;
    width: 150px;
    border: 1px solid lightgray;
    background-color: white;
    border-radius: 5px;
   }
   .main{
    position: absolute;
    top: 30px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
   }
   .main ul{
    margin-left: 30px;
   }
   a{
    color: gray;
   }
  </style>
 </head>
 <body>
 </body>
</html>
<script>
 $(document).ready(function(){
  //添加測(cè)試dom,產(chǎn)生測(cè)試數(shù)據(jù)
  var arr = [];
  for(var i = 0;i<50;i++){
   var id = 'id'+i;
   var $dom = $("<div class='item' id='"+id+"'><div class='head'>"+id+"</div></div>");
   $dom.appendTo($("body"));
   arr.push(id);
  }
  //調(diào)用方法
  $.fmenu(arr);
 })
 $.extend({
  fmenu:function(arr){
   $(".fbox").remove();
   var $fbox = $("<div class='fbox'></div>");
   var $head  =$("<div class='head'>懸浮菜單</div>");
   var $main = $("<div class='main'></div>");
   var $ul = $("<ul class='ul'></ul>")
   $ul.appendTo($main);
   $head.appendTo($fbox);
   $main.appendTo($fbox);
   $fbox.appendTo($("body"));
   arr.forEach(item=>{
    var $li = $("<li><a href='#"+item+"'>"+item+"</a></li>");
    $li.appendTo($ul);
   })
  }
 })
</script>

思路解釋

a標(biāo)簽不只是用來(lái)做超鏈接用的，其實(shí)還可以用來(lái)做下載文件的通道，也可以用來(lái)做文檔位置的導(dǎo)航
就比如你的某一組屬性是個(gè)在當(dāng)前頁(yè)面中查得到的，比如#id 、.class,按照選擇器的方式來(lái)，用js來(lái)做就是拿到選擇的這個(gè)路徑然后獲得他的文檔高度，再讓瀏覽器滾動(dòng)到對(duì)應(yīng)的高度。
而a.href直接等于選擇的對(duì)象就可以直接錨點(diǎn)定位到對(duì)應(yīng)的位置。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: