摘要：很快地恢復(fù)快速回復(fù)肯定是客戶反饋的金鳳凰，等會看是否考核得分健康的首付款獲取注釋所在的容器四總結(jié)以上寫的時間比較急，代碼很粗糙，有類似功能的大神們有好的建議或者想法多多留言與分享，謝謝先就這些吧，后續(xù)再繼續(xù)改進和優(yōu)化
初入前端，最近在使用word時發(fā)現(xiàn)有個批注功能，就想的如何用代碼去實現(xiàn)一下
一、大概需求如下：1.頁面整體分為左中右兩部分，中間為正文內(nèi)容區(qū)域，右右兩側(cè)為注釋瀏覽區(qū)域
2.右側(cè)展示的注釋內(nèi)容必須與所需注釋詞匯在一條線上
3.初始時只顯示兩行內(nèi)容，點擊時展開全部
4.如果兩個被注釋的詞距離太近，注釋部分要求依次排序
1.在注釋內(nèi)容外側(cè)添加一個div，利用div的min-height屬性控制注釋的位置
2.利用position: absolute絕對定位，動態(tài)的生成和改變注釋的位置
在實現(xiàn)上述兩種方法的過程中發(fā)現(xiàn)，第一種方案在數(shù)據(jù)量龐大的情況下，會出現(xiàn)bug，頁面會奔潰，果斷放棄了，選擇了第二種方式實現(xiàn)
1.常量部分：1> args--------->當前文章內(nèi)容中有注釋的詞集合
2> notes-------->從庫中獲取到的注釋文本集合
3> rightWrap---->右側(cè)部分注釋區(qū)域?qū)ο?br>4> leftWrap----->左側(cè)部分注釋區(qū)域?qū)ο?/p>
2.方法部分
1> setSite()------------------------------>初始界面加載時確定注釋的位置
2> resetTop(elem, type)------------------->在點擊時重新設(shè)置所有注釋的位置
elem：當前被點擊的對象
type：(open/close)全部展開或部分展示
3> bindClick(elem, type, selector, fn)---->綁定事件函數(shù)
elem：綁定事件的元素
type：綁定的事件類型，例如（click）
selector：動態(tài)添加到elem中的元素
fn：綁定事件執(zhí)行后回調(diào)方法
1> index.html部分代碼
人世
使其停下來
使光影、蜉蝣
眾生的所向是什么
尤以靜止方可得出
我不做空明的闡述
我是凡人，且一直落在凡塵里
使云霞似錦吧
若產(chǎn)出時間的黃金
時間的黃金只能在一顆心里
播種，萌發(fā)，成為照耀
內(nèi)斂的照耀比及月亮
我們需做輝光的同謀人
我們依舊不能成為閃電或是驚雷
我們只是平凡的形形色色
為所有悸動歡呼的應(yīng)該是另一群人
那些卑微的怯懦的都給我
我隱在暗處說——
“這很好！”，是的，你注視我說——
“你很好！”
還有可以使其墮落下去使其淪陷下去的嗎
光影、蜉蝣、我和你
和岸邊無風(fēng)也要搖蕩的蘆葦
和似乎永不休止的蟬鳴
和流水
2> index.css部分代碼
.wrap {
display: flex;
position: relative;
width: 100%;
}
article.center {
flex: 1;
text-align: justify;
padding: 20px;
border-right: 1px solid #ffffd;
border-left: 1px solid #ffffd;
}
article.center p {
line-height: 24px;
}
article.center p b {
color: red;
}
aside.left, aside.right {
width: 300px;
padding: 20px 0;
}
.wrap aside mark {
background-color: #fff;
color: #afafaf;
padding: 0 20px;
position: absolute;
top: 0;
height: 44px;
overflow: hidden;
line-height: 20px;
font-size: 12px;
text-align: justify;
cursor: pointer;
width: 260px;
}
3> index.js部分代碼
;
(function() {
// 構(gòu)造函數(shù)
function View(elem, notes, rightWrap, leftWrap) {
this.rightWrap = rightWrap;
this.leftWrap = leftWrap;
this.args = typeof elem === "object" ? elem : document.getElementById(elem);
this.notes = notes === undefined ? [] : notes;
this.init();
}
// 原型
View.prototype = {
constructor: View,
init: function() {
var self = this;
self.setSite();
self.bindClick(document.body, "click", "mark", function (e) {
var target = e.target;
if(this.style.height) {
this.style.height = "";
self.resetTop(this, "close");
return;
} else {
this.style.height = this.scrollHeight +"px";
self.resetTop(this, "open");
}
});
},
// 設(shè)定初始高度
setSite: function() {
for(let i = 0; i < this.args.length; i++) {
// 默認新建的批注距離頂部的高度
var swdTop = 0;
var addMark = "";
// 計算當前批注的高度是否被覆蓋,如果被覆蓋,進行處理
if(i > 0) {
if(this.args[i].offsetTop - this.args[i-1].offsetTop > $(".note-" + (i-1)).height()) {
swdTop = this.args[i].offsetTop - 2 + "px";
} else {
swdTop = this.args[i-1].offsetTop + $(".note-" + (i-1)).height() - 2 + "px";
}
} else {
swdTop = this.args[i].offsetTop - 2 + "px";
}
if(this.notes.length > 0) {
addMark = ""+ this.args[i].innerHTML +"：" + this.notes[i] + "";
} else {
addMark = "";
}
// 將得到的新標簽動態(tài)添加到容器中
if(this.args[i].classList.length > 1 && this.args[i].classList[1] === "nleft" && this.leftWrap !== undefined) {
this.leftWrap.append(addMark);
} else {
this.rightWrap.append(addMark);
}
}
},
// 重新設(shè)置元素高度
resetTop: function(elem, type) {
let index = parseInt(elem.className.substr(elem.className.indexOf("-")+1));
for(; index < this.args.length-1; index++) {
var swdNewTop = 0;
var addTop = [];
if(this.args[index+1].offsetTop - this.args[index].offsetTop > $("." + elem.className).height()) {
console.log("我們不需要執(zhí)行任何東西了")
return
} else {
if(type === "open") {
swdNewTop = this.args[index].offsetTop + $("." + elem.className).height() + 8 + "px";
addTop[index+1] = swdNewTop;
} else {
swdNewTop = this.args[index].offsetTop + $("." + elem.className).height() + "px";
}
$(".note-" + (index+1)).attr("style", "top:" + swdNewTop);
return
}
}
},
// 綁定元素點擊事件
bindClick: function(elem, type, selector, fn) {
if(fn === null) {
fn = selector;
selector = null;
}
elem.addEventListener(type, function(e) {
var target = e.target;
if(selector) {
target = e.target;
if(target.matches(selector)) {
fn.call(target, e);
}
} else {
fn(e);
}
})
}
}
// 對外公開方法
window.View = View;
})();
4.通過擴展方法將拖拽方法擴展到j(luò)query的一個實例方法
(function($) {
$.fn.extend({
viewDocument: function(notes, rightWrap, leftWrap) {
new View(this, notes, rightWrap, leftWrap);
// 為了保證jQuery所有的方法能夠?qū)崿F(xiàn)鏈式訪問，每個方法的最后必須返回this，即返回jquery的實例
return this;
}
})
})(jQuery);
5.在主界面上的調(diào)用方法
// 此內(nèi)容從數(shù)據(jù)庫中獲取，這里只是舉個例子
let notes = [
"某些腦殘們現(xiàn)在農(nóng)村你現(xiàn)在，每次， 很快就恢復(fù)九分褲空間發(fā)揮科技的護膚開始開好房間快點恢復(fù)快接啊漢蘭達！",
"夢想決定了開始，沒拿到，啥的，明年初，茉香奶茶， 空間打開手機上看到空間發(fā)揮的機會?？怂苟霹N花開始瘋狂開幾號放假回家看到好看接電話時刻，會盡快的釋放開好房間大客戶",
"沒你聰明，在哪吃沒寫呢不出毛病都說了卡刷卡機打盡快打款收到啦囊括了速度很快啦可垃圾袋",
"歐文一二惡牛肉回復(fù)可見回復(fù)可見空間十分開始。很快地恢復(fù)快速回復(fù)肯定是客戶反饋的金鳳凰，等會看是否考核得分健康的首付款"
];
// 獲取注釋所在的容器
let rightWrap = $("aside.right");
let leftWrap = $("aside.left");
$(".center b").viewDocument(notes, rightWrap, leftWrap);
四、總結(jié)
以上寫的時間比較急，代碼很粗糙，有類似功能的大神們有好的建議或者想法多多留言與分享，謝謝 先就這些吧，后續(xù)再繼續(xù)改進和優(yōu)化
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108169.html
一、HTML5與HTML4 1.1 推出的理由和目標 H5的出現(xiàn)，對于Web來說意義重大。因為他的意圖是想要把目前Web上存在的各種問題一并解決掉。 Web瀏覽器之間的兼容性很低 文檔結(jié)構(gòu)不夠明確（增加了很多結(jié)構(gòu), 語義化的標簽） Web應(yīng)用程序的功能受到了限制 H5 的出現(xiàn)極大的解決了上面的問題 1.2 語法的改變 1.2.1 DOCTYPE聲明 H5 DOCTYPE的聲明是這樣的： ...
摘要：故九萬里，則風(fēng)斯在下矣，而后乃今培風(fēng)背負青天，而莫之夭閼者，而后乃今將圖南。這里是文件的內(nèi)容部分最后更新時間最后更新時間默認不開啟，它是基于提交的時間戳，所以我們的靜態(tài)站點是需要通過的倉庫進行管理的，并且它是按的時間來計算的。VuePress(0.x版本) 本blog配套了一個基于 VuePress 的一個簡單的配置案例，此配置案例包含了本blog絕大部分配置案例，更多詳情請移步這里VueP...
閱讀 1997·2021-11-24 09:39
閱讀 990·2021-11-11 16:55
閱讀 1447·2021-10-09 09:43
閱讀 1433·2021-10-08 10:17
閱讀 1664·2021-08-25 09:41
閱讀 436·2019-08-30 13:02
閱讀 638·2019-08-29 15:14
閱讀 1016·2019-08-29 13:53
