怎么新建MySQL数据库
发布时间：2022-10-20
作者：admin
阅读：308
阅读：308
在日常操作或是项目的实际应用中，有不少朋友对于“用jquery实现悬浮菜单的思路和具体代码是什么”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。
现在大家对于用jquery实现悬浮菜单的思路和具体代码是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
每天学一个jquery插件-悬浮的菜单，供大家参考，具体内容如下
悬浮的菜单
又是一个很常见的效果，用上了a标签的一个常见的特性-锚点
效果如下
代码部分
<!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实现悬浮菜单的思路和具体代码是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理