• 售前

  • 售后

热门帖子
入门百科

jquery插件实现悬浮的菜单

[复制链接]
匣中剑他娘官 显示全部楼层 发表于 2021-10-26 13:44:03 |阅读模式 打印 上一主题 下一主题
每天学一个jquery插件-悬浮的菜单,供各人参考,详细内容如下
悬浮的菜单

又是一个很常见的效果,用上了a标签的一个常见的特性-锚点
效果如下

代码部分
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>悬浮的菜单</title>
  6.   <script src="js/jquery-3.4.1.min.js"></script>
  7.   <style>
  8.    *{
  9.     margin: 0px;
  10.     padding: 0px;
  11.     user-select: none;
  12.    }
  13.    .item{
  14.     border: 1px solid lightgray;
  15.     margin: 10px;
  16.     height: 400px;
  17.     border-radius: 5px;
  18.     position: relative;
  19.    }
  20.    .head{
  21.     background-color: lightgray;
  22.     height: 30px;
  23.     display: flex;
  24.     justify-content: flex-start;
  25.     align-items: center;
  26.     text-indent: 10px;
  27.     position: absolute;
  28.     top: 0px;
  29.     width: 100%;
  30.    }
  31.    .fbox{
  32.     position: fixed;
  33.     top: 20%;
  34.     bottom: 20%;
  35.     right: 20px;
  36.     width: 150px;
  37.     border: 1px solid lightgray;
  38.     background-color: white;
  39.     border-radius: 5px;
  40.    }
  41.    .main{
  42.     position: absolute;
  43.     top: 30px;
  44.     width: 100%;
  45.     bottom: 0px;
  46.     overflow: auto;
  47.    }
  48.    .main ul{
  49.     margin-left: 30px;
  50.    }
  51.    a{
  52.     color: gray;
  53.    }
  54.   </style>
  55. </head>
  56. <body>
  57. </body>
  58. </html>
  59. <script>
  60. $(document).ready(function(){
  61.   //添加测试dom,产生测试数据
  62.   var arr = [];
  63.   for(var i = 0;i<50;i++){
  64.    var id = 'id'+i;
  65.    var $dom = $("<div class='item' id='"+id+"'><div class='head'>"+id+"</div></div>");
  66.    $dom.appendTo($("body"));
  67.    arr.push(id);
  68.   }
  69.   //调用方法
  70.   $.fmenu(arr);
  71. })
  72. $.extend({
  73.   fmenu:function(arr){
  74.    $(".fbox").remove();
  75.    var $fbox = $("<div class='fbox'></div>");
  76.    var $head  =$("<div class='head'>悬浮菜单</div>");
  77.    var $main = $("<div class='main'></div>");
  78.    var $ul = $("<ul class='ul'></ul>")
  79.    $ul.appendTo($main);
  80.    $head.appendTo($fbox);
  81.    $main.appendTo($fbox);
  82.    $fbox.appendTo($("body"));
  83.    arr.forEach(item=>{
  84.     var $li = $("<li><a href='#"+item+"'>"+item+"</a></li>");
  85.     $li.appendTo($ul);
  86.    })
  87.   }
  88. })
  89. </script>
复制代码
思路表明

       
  • a标签不但是用来做超链接用的,实在还可以用来做下载文件的通道,也可以用来做文档位置的导航   
  • 就比如你的某一组属性是个在当前页面中查得到的,比如#id 、.class,按照选择器的方式来,用js来做就是拿到选择的这个路径然后获得他的文档高度,再让欣赏器滚动到对应的高度。   
  • 而a.href直接即是选择的对象就可以直接锚点定位到对应的位置。
以上就是本文的全部内容,盼望对各人的学习有所帮助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作