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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现增删改查
Dec 22 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
短波问题解答
2021/02/28 无线电
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
php 多文件上传的实现实例
2016/10/23 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
Python turtle库的画笔控制说明
2020/06/28 Python
详细分析Python collections工具库
2020/07/16 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
体育教师自荐信范文
2013/12/16 职场文书
员工安全责任书范本
2014/07/24 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
借条格式范本
2015/05/25 职场文书
灵魂歌王观后感
2015/06/17 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技