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