jsを使ってワールド内でアノテーション機能を模倣する効果を実現する方法（コード添付）

この記事の内容は、js を使用して世界のアノテーション機能を模倣する方法に関するものです (コード付き)。必要な友人が参考になれば幸いです。あなた。

私は最近 Word を使用するときにアノテーション機能を見つけました。

1. 一般的な要件は次のとおりです。ページは左、中央、右の 2 つの部分に分かれています。これはテキストコンテンツ領域であり、右側と左側は注釈閲覧領域です

2. 右側に表示される注釈コンテンツは、必要な内容と同じ行にある必要があります。注釈の語彙

3. 最初は 2 行のコンテンツのみが表示され、クリックするとすべてが展開されます
4. 注釈付きの 2 つの単語が近すぎる場合は、注釈部分を順番に並べ替える必要があります

2.注釈コンテンツの外側に p を追加し、p の min-height 属性を使用して注釈の位置を制御します

2. 位置: 絶対位置を使用して、注釈の位置を動的に生成および変更します

3.上記 2 つの方法を実装する過程で、最初の解決策ではデータ量が膨大になるとページがクラッシュするというバグが発生することが判明したため、断固として 2 番目の方法で

1 の部分を実装することにしました。 :

1> 引数--------> 現在の記事コンテンツ内の注釈付き単語のコレクション

2> 注釈テキストのコレクション

3> ; rightWrap----> 右側の注釈領域オブジェクト

2. ------------------------>Initial インターフェースロード時のアノテーションの位置を決定します

2>resetTop(elem, type)- ----------------->クリックされたときにすべての注釈の位置をリセットします

要素: 現在 クリックされたオブジェクト
タイプ: (開く/閉じる) 完全に展開または部分的に表示します
3> bindingClick(elem, type, selector, fn)---->バインドイベント関数
elem: イベントをバインドする要素

type : (click) などのバインドされたイベントタイプ

selector: elem に動的に追加される要素

fn: バインディング イベント実行後のコールバック メソッド

3. 全体のコード

1>index.html 部分コード

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

2>index.js 部分コード

.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 . 拡張メソッドを通じてドラッグ アンド ドロップ メソッドを jquery のインスタンス メソッドに拡張します

;
(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  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>'+ 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  $('.' + 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. メイン インターフェイスでメソッドを呼び出します

js を使用して Word 形式のブラシ関数を模倣してコードを実装します[推奨]_Baidu Libraryの模倣を実現するJavaScriptスキル

PHP、Docinオンラインドキュメントエフェクト(Word、Excel、PPTからFlashへ)、_PHPチュートリアル

jsワードテーブルにコードを動的に追加_JavaScriptスキル

以上がjsを使ってワールド内でアノテーション機能を模倣する効果を実現する方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。