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卸载全部事件的思路详解
Apr 03 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现高级检索功能
May 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
Javascript----文件操作
2007/01/18 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Python实现批量下载文件
2015/05/17 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
毕业证丢失证明
2014/01/15 职场文书
学校与家长安全责任书
2014/07/23 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
商业计划书范文
2019/04/24 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python