jquery插件实现悬浮的菜单


Posted in jQuery onApril 24, 2021

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

悬浮的菜单

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

效果如下

jquery插件实现悬浮的菜单

代码部分

<!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 相关文章推荐
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
jquery插件实现图片悬浮
jQuery实现影院选座订座效果
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
jQuery treeview树形结构应用
Mar 24 #jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
You might like
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
jQuery实现简单全选框
2020/09/13 jQuery
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
简单谈谈Python的pycurl模块
2018/04/07 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python数据分析:关键字提取方式
2020/02/24 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
水果超市创业计划书
2014/01/27 职场文书
安全生产承诺书范文
2014/05/22 职场文书