本篇文章帶給大家的內容是關於如何利用js實現仿world中批註功能的效果(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
初入前端,最近使用word時發現有個註解功能,就想的如何用程式碼去實作一下
1.頁面整體分為左中右兩部分,中間為正文內容區域,右右兩側為註釋瀏覽區域
2.右側所展示的註釋內容必須與所需註釋詞彙在一條線上
3.初始時只顯示兩行內容,點擊時展開全部
4.如果兩個被註解的字距離太近,註解部分要求依序排序
1.在註解內容外側加入一個p,利用p的min-height屬性控制註解的位置
2.利用position: absolute絕對定位,動態的產生和改變註解的位置
在實現上述兩種方法的過程中發現,第一種方案在資料量龐大的情況下,會出現bug,頁面會奔潰,果斷放棄了,選擇了第二種方式實作
1> args--------->目前文章內容中有註解的字集
2> notes -------->從庫中取得的註解文字集合
3> rightWrap---->右側部分註解區域物件
4> leftWrap----->左側部分註解區域物件
1> setSite()----------------------- ------->初始介面載入時決定註解的位置
2> resetTop(elem, type)------------------->在點擊時重新設定所有註解的位置
elem:目前被點擊的物件
type:(open/close)全部展開或部分展示
3> bindClick(elem, type, selector, fn)-- -->綁定事件函數
elem:綁定事件的元素
type:綁定的事件類型,例如(click)
selector:動態加入elem中的元素
fn:綁定事件執行後回呼方法
1> index.html部分程式碼
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 |
|
2> index.css部分程式碼
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 |
|
3> index.js部分程式碼
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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
|
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 6 7 8 9 10 11 |
|
相關推薦:
用js模仿word格式刷功能實作程式碼[推薦]_javascript技巧
##PHP實作仿百度文庫,豆丁線上文件效果(word,excel,ppt轉flash),_PHP教學
#js word表格動態新增程式碼_javascript技巧
##
以上是如何利用js實現仿world中批註功能的效果(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!