jquery怎样实现简单的悬浮菜单效果？
发布时间：2022-02-22 13:14:12 所属栏目：语言 来源：互联网
导读：今天给大家分享的是jquery如何实现简单的悬浮菜单效果，悬浮菜单是比较常见的，小编觉得挺实用的，因此分享给大家做个参考，实现效果及代码如下，接下来跟随小编一起看看吧。 代码部分 !DOCTYPE html html head meta charset=utf-8 title悬浮的菜单/title sc
|
今天给大家分享的是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插件的使用有帮助，想要了解更多jquery插件的内容，大家可以关注群英网络其它相关文章。  （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
