Comment utiliser js pour obtenir l'effet d'imiter la fonction d'annotation dans le monde (code ci-joint)-js tutoriel-php.cn

Le contenu de cet article explique comment utiliser js pour obtenir l'effet d'imiter la fonction d'annotation dans le monde (avec du code). J'espère que ce sera le cas. utile pour vous.

Je suis nouveau dans le front-end. J'ai récemment trouvé une fonction d'annotation lors de l'utilisation de Word, et je réfléchissais à la façon de l'implémenter avec du code

1 Les exigences approximatives. sont les suivants :

1. La page est divisée en deux parties : gauche, milieu et droite, et les côtés droit et droit sont la zone de navigation des annotations
2. Le contenu de l'annotation affiché à droite doit être conforme au vocabulaire d'annotation requis
3. Seules deux lignes de contenu seront affichées au départ, et toutes seront développées lorsque vous cliquerez dessus
4. Si les deux mots annotés le sont également. close, la partie d'annotation doit être triée dans l'ordre

2. Solution par défaut

1 Ajoutez un p en dehors du contenu de l'annotation et utilisez l'attribut min-height de p pour contrôler la position du. annotation
2. Utiliser position : positionnement absolu absolu pour générer et modifier dynamiquement la position de l'annotation

3 Processus de mise en œuvre

Dans le processus de mise en œuvre des deux méthodes ci-dessus, j'ai trouvé. que la première solution aurait des bugs et que la page planterait lorsque le volume de données était énorme. J'ai abandonné de manière décisive et j'ai choisi la deuxième solution. Deux façons de mettre en œuvre

1. 1> args---------> Un ensemble de mots avec des annotations dans le contenu actuel de l'article

2> notes -------->Collection de textes d'annotation obtenue à partir de la bibliothèque

3> rightWrap---->Objet de zone d'annotation de la partie droite
4> leftWrap----->Objet de zone d'annotation dans la partie gauche

2. >1> setSite()------------- -------> Déterminer la position de l'annotation lorsque l'interface initiale est chargée

2> resetTop(elem, type)-------------------> Réinitialiser la position de toutes les annotations lorsque vous cliquez dessus

elem : l'objet actuellement cliqué

type : (ouvrir/fermer) développer complètement ou afficher partiellement

3> bindClick(elem, type, selector, fn)-- -->Fonction d'événement de liaison
elem : l'élément auquel l'événement est lié
type : le type d'événement lié, tel que (clic)
sélecteur : l'élément ajouté dynamiquement à elem
fn : méthode de rappel après l'exécution de l'événement de liaison

3.

1> code partiel index.html

2> code partiel index.css

<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>

Copier après la connexion

4. Étendre la méthode glisser-déposer à une méthode d'instance de jquery via la méthode d'extension

.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;
}

Copier après la connexion

5 Dans les méthodes d'appel principales de l'interface

;
(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;
})();

Copier après la connexion

Recommandations associées :

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

Copier après la connexion

Utilisez js pour imiter la fonction de pinceau au format Word pour implémenter le code [Recommandé]_javascript skills

//  此内容从数据库中获取，这里只是举个例子
let notes = [
         '山不在高，有仙则名；水不在深，有龙则灵；斯是陋室，惟吾德馨',
         '东边日出西边雨，道是无晴却有晴。一蓑烟雨任平生。桃李不言下自成蹊。会当凌绝顶，一览众山小。莫道不消魂，帘卷黄花瘦。',
         '得不到的永远在骚动，被宠爱的都有恃无恐，玫瑰的红，容易受伤的梦。',
         '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！'
     ];
//  获取注释所在的容器
let rightWrap = $('aside.right');
let leftWrap = $('aside.left');
$('.center b').viewDocument(notes, rightWrap, leftWrap);

Copier après la connexion

PHP réalise le effet d'imitation des documents en ligne de la bibliothèque Baidu et Docin (word, excel, ppt vers flash), tutoriel _PHP

table de mots js ajoutant dynamiquement des compétences code_ javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!