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解析获取JSON数据
Apr 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Apache部署Django项目图文详解
2019/07/30 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
商场活动策划方案
2014/01/24 职场文书
结婚保证书范文
2014/04/29 职场文书
安全生产承诺书范文
2014/05/22 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
尼克胡哲观后感
2015/06/08 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL