js를 사용하여 세계에서 주석 기능을 모방하는 효과를 얻는 방법(코드 첨부)-JS 튜토리얼-php.cn

이 글의 내용은 세상에서 주석 기능을 모방하는 효과를 얻기 위해 js를 사용하는 방법에 대한 것입니다. (코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 될 것입니다.

프론트엔드가 처음인데 최근 워드를 사용하다가 주석 기능을 발견하고 코드로 어떻게 구현할까 고민 중이었습니다

1. 일반적인 요구사항은 다음과 같습니다:

1. 페이지는 왼쪽, 가운데, 오른쪽 두 부분으로 나누어집니다. 가운데는 텍스트 콘텐츠 영역이고 오른쪽과 오른쪽은 주석입니다. 탐색 영역
2. 오른쪽에 표시되는 주석 내용은 한 줄의 필수 주석 단어와 일치해야 합니다
3. 처음에는 두 줄의 내용만 표시되며 클릭하면 모두 확장됩니다. 🎜🎜#4. 주석이 달린 두 단어가 너무 가까우면 주석 부분을 순서대로 정렬해야 합니다.

2. 기본 솔루션

1. 주석 내용을 사용하고 p의 최소 높이 속성을 사용하여 주석 위치를 제어합니다

2. 위치 사용: 절대 위치 지정, 주석 위치를 동적으로 생성 및 변경

3. 구현 과정

위의 두 가지 방법을 구현하는 과정에서 첫 번째 솔루션의 데이터 양이 엄청나다는 사실을 발견했습니다. 어떤 경우에는 버그가 나타나며 페이지가 다운되는 경우가 있어서 과감히 포기했습니다.

1을 구현하는 두 번째 방법을 선택했습니다. 상수 부분:

1> 기사 내용

2> 노트--------->라이브러리에서 가져온 주석 텍스트 모음
3> rightWrap ---->오른쪽 부분 주석 영역 개체
4> leftWrap---->왼쪽 부분 주석 영역 객체

2. 메소드 부분

#🎜 🎜#1> ----------> 초기 인터페이스가 로드될 때 주석의 위치를 결정합니다#🎜🎜 #2> ---->클릭 시 모든 주석의 위치 재설정

elem: 현재 클릭한 개체

유형: (열기/닫기) 완전히 확장 또는 부분적으로 표시
3> bindClick(elem, type, selector, fn)---->바인딩 이벤트 함수
elem: 바인딩 이벤트 요소
유형: 바인딩된 이벤트 유형( 클릭)
선택자: 요소에 동적으로 추가됨
fn: 바인딩 이벤트 실행 후 콜백 메소드
# 🎜🎜#3. 전체 코드

1> .html 부분 코드

<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 부분 코드

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

로그인 후 복사

3> index .js 부분 코드

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

로그인 후 복사

4. 확장 메서드를 통해 jquery의 인스턴스 메서드에 메서드를 삭제합니다

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

로그인 후 복사

5. 기본 인터페이스에서 메서드를 호출합니다#🎜🎜 #

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

로그인 후 복사