脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery悬浮菜单

jquery插件实现悬浮的菜单

 更新时间：2021年04月23日 17:09:54   作者：阿飞超努力  
这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

每天学一个jquery插件-悬浮的菜单，供大家参考，具体内容如下

悬浮的菜单

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

效果如下

代码部分

<!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(){
  //添加测试dom,产生测试数据
  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);
  }
  //调用方法
  $.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标签不只是用来做超链接用的，其实还可以用来做下载文件的通道，也可以用来做文档位置的导航
  • 就比如你的某一组属性是个在当前页面中查得到的，比如#id 、.class,按照选择器的方式来，用js来做就是拿到选择的这个路径然后获得他的文档高度，再让浏览器滚动到对应的高度。
  • 而a.href直接等于选择的对象就可以直接锚点定位到对应的位置。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jquery.mousewheel实现整屏翻屏效果

    jquery.mousewheel实现整屏翻屏效果

    jQuery Mousewheel 用于添加跨浏览器的鼠标滚轮支持。 mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。
    2015-08-08
  • jQuery.validate.js表单验证插件的使用代码详解

    jQuery.validate.js表单验证插件的使用代码详解

    Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，这篇文章主要介绍了jQuery.validate.js表单验证插件的使用代码详解,需要的朋友可以参考下
    2018-10-10
  • 利用jquery正则表达式在页面验证url网址输入是否正确

    利用jquery正则表达式在页面验证url网址输入是否正确

    这篇文章主要介绍了关于利用jquery正则表达式在页面验证url网址输入是否正确的相关资料，文中给出了完整的示例代码，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • 基于jquery的获取浏览器窗口大小的代码

    基于jquery的获取浏览器窗口大小的代码

    今天正好用到这个，就网上搜了搜，贴出来了。需要的朋友可以参考下。
    2011-03-03
  • jQuery实现扫雷小游戏

    jQuery实现扫雷小游戏

    这篇文章主要为大家详细介绍了jQuery实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 前端开发必知的15个jQuery小技巧

    前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

    jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

    这篇文章主要介绍了jQuery 移动端拖拽（模块化开发，触摸事件，webpack）的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-10-10
  • jQuery实现设置、移除文本框默认值功能

    jQuery实现设置、移除文本框默认值功能

    这篇文章主要介绍了jQuery实现设置、移除文本框默认值功能,本文实现是类似html5 placeholder（空白提示）效果,正常时文本框有提示文字,当文本框获得焦点时变为空白,需要的朋友可以参考下
    2015-01-01
  • jquery.map()方法的使用详解

    jquery.map()方法的使用详解

    本文给大家详细介绍了jQuery中的原型方法map的使用指南和源码分析，十分的不错，对于大家学习jQuery非常有帮助，这里推荐给大家。
    2015-07-07
  • 为你的网站增加亮点的9款jQuery插件推荐

    为你的网站增加亮点的9款jQuery插件推荐

    如今，jQuery插件众多，满足各种各样的应用需求。 在这篇文章中，我收集了9款很棒的插件，最喜欢的是Sausage内容分页插件，作者想法特别新颖！希望你能从中找到自己需要的插件。
    2011-05-05

最新评论