So erzielen Sie mit js den Effekt, die Annotationsfunktion in der Welt zu imitieren (Code im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von js, um den Effekt der Nachahmung der Annotationsfunktion in der Welt zu erzielen. Ich hoffe, dass dies für Freunde in Not hilfreich ist hilfreich für Sie.

Ich bin neu im Frontend. Ich habe kürzlich eine Anmerkungsfunktion bei der Verwendung von Word gefunden und überlegt, wie ich sie mit Code implementieren kann.

Die ungefähren Anforderungen sind wie folgt:

1. Die Seite ist in zwei Teile unterteilt: links, in der Mitte und rechts. Die Mitte ist der Textinhaltsbereich und die rechte und rechte Seite sind der Bereich zum Durchsuchen von Anmerkungen
2. Der rechts angezeigte Anmerkungsinhalt muss mit dem erforderlichen Anmerkungsvokabular übereinstimmen
3. Zunächst werden nur zwei Zeilen Inhalt angezeigt, und alle werden erweitert, wenn darauf geklickt wird
4. Wenn die beiden kommentierten Wörter ebenfalls vorhanden sind Schließen, der Anmerkungsteil muss in der Reihenfolge sortiert werden

2. Standardlösung

1. Fügen Sie ein p außerhalb des Anmerkungsinhalts hinzu und verwenden Sie das Attribut „min-height“ von p, um die Position zu steuern Anmerkung
2. Verwenden Sie Position: absolute absolute Positionierung, um die Position der Anmerkung dynamisch zu generieren und zu ändern

3. Implementierungsprozess

Bei der Implementierung der beiden oben genannten Methoden habe ich festgestellt dass die erste Lösung Fehler aufweisen würde und die Seite abstürzen würde, wenn das Datenvolumen riesig wäre, und mich für die zweite Lösung entschieden habe

Konstanter Teil:

1> args--------> Eine Reihe von Wörtern mit Anmerkungen im aktuellen Artikelinhalt
2> Anmerkungstextsammlung aus der Bibliothek
3> rightWrap---->Anmerkungsbereichsobjekt im rechten Teil
4> leftWrap----->Methodenteil

1> setSite()------- -------> Bestimmen Sie die Position der Anmerkung, wenn die anfängliche Schnittstelle geladen wird

2> resetTop(elem, type)-----> Setzt die Position aller Anmerkungen zurück, wenn darauf geklickt wird

elem: das aktuell angeklickte Objekt
Typ: (öffnen/schließen) vollständig erweitern oder teilweise anzeigen
3> bindClick(elem, type, selector, fn)-- -->Bind-Ereignisfunktion
elem: Element, an das das Ereignis gebunden ist
Typ: gebundener Ereignistyp, z. B. (Klick)
Selektor: dynamisch zu elem hinzugefügtes Element
fn: Rückrufmethode nach der Ausführung des Bindungsereignisses

3. Gesamtcode

1> index.html-Teilcode

<p class="wrap">
    <aside class="left"></aside>
    <article class="center">
        <h3>人世</h3>
        <br />
        <p>使其停下来</p>
        <p>使光影、蜉蝣</p>
        <p><b class="special-0 nleft">众生</b>的所向是什么</p>
        <p>尤以静止方可得出</p>
        <p>我不做空明的阐述</p>
        <p>我是凡人，且一直落在凡尘里</p>
        <p>使云霞似锦吧</p>
        <p>若产出时间的黄金</p>
        <p>时间的<b class="special-1">黄金</b>只能在一颗心里</p>
        <p>播种，<b class="special-2">萌发</b>，成为照耀</p>
        <p>内敛的照耀比及月亮</p>
        <p>我们需做辉光的同谋人</p>
        <p>我们依旧不能成为闪电或是惊雷</p>
        <p>我们只是平凡的形形色色</p>
        <p>为所有悸动欢呼的应该是另一群人</p>
        <p>那些卑微的怯懦的都给我</p>
        <p>我隐在暗处说——</p>
        <p>“这很好！”，是的，你注视我说——</p>
        <p>“你很好！”</p>
        <p>还有可以使其堕落下去使其沦陷下去的吗</p>
        <p>光影、<b class="special-3">蜉蝣</b>、我和你</p>
        <p>和岸边无风也要摇荡的芦苇</p>
        <p>和似乎永不休止的蝉鸣</p>
        <p>和流水</p>
    </article>
    <aside class="right"></aside>
</p>

2> index.css-Teilcode

.wrap {
    display: flex;
    position: relative;
    width: 100%;
}
article.center {
    flex: 1;
    text-align: justify;
    padding: 20px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
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;
}

4. Erweitern Sie das Drag-and-Drop Methode zu einer Instanzmethode von jquery über die Erweiterungsmethode

;
(function() {
    
//  构造函数
    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');
                }
            });
        },
        
//      设定初始高度
        setSite: function() {
            for(let i = 0; i < this.args.length; i++) {
//               默认新建的批注距离顶部的高度
                 var swdTop = 0;
                 var addMark = &#39;&#39;;
                 
//              计算当前批注的高度是否被覆盖,如果被覆盖,进行处理
                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 = '<mark class="note-&#39; + i + &#39;" style="top:&#39; + swdTop + &#39;">'+ this.args[i].innerHTML     +'：' + this.notes[i] + '</mark>';
                 } else {
                     addMark = '';
                 }
                 
//                 将得到的新标签动态添加到容器中
                   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);
                 }
             }
        },
        
//      重新设置元素高度
        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('我们不需要执行任何东西了')
                    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;
})();

5. Rufen Sie die Methode auf der Hauptschnittstelle auf

(function($) {
  $.fn.extend({
    viewDocument: function(notes, rightWrap, leftWrap) {
      new View(this, notes, rightWrap, leftWrap);
      //  为了保证jQuery所有的方法能够实现链式访问，每个方法的最后必须返回this，即返回jquery的实例
      return  this;
    }
  })
})(jQuery);

Verwandte Empfehlungen:

Verwenden Sie js zum Nachahmen Die Wortformat-Pinselfunktion zum Implementieren von Code [Empfohlen]_Javascript-Kenntnisse

PHP zur Nachahmung der Baidu-Bibliothek, Docin-Online-Dokumenteffekt (Word, Excel, PPT zu Flash), _PHP-Tutorial

JS-Worttabelle fügt dynamisch Code_Javascript-Fähigkeiten hinzu

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit js den Effekt, die Annotationsfunktion in der Welt zu imitieren (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!