每天學一個jquery插件-懸浮的菜單，供大家參考，具體內容如下
懸浮的菜單
又是一個很常見的效果，用上了a標簽的一個常見的特性-錨點
效果如下
代碼部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!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直接等于選擇的對象就可以直接錨點定位到對應的位置。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44142582/article/details/115765498
