Блог

Главная - Вопросы по программированию - Анимация Javascript / CSS, отображающая текстовую информацию для ссылки

Анимация Javascript / CSS, отображающая текстовую информацию для ссылки

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создаю веб-сайт CV, который включает мою информацию о моих исследовательских работах. И я хотел создать анимацию, в которой при нажатии на кнопку с надписью «Статья 1» всплывает абстрактное информационное окно и сообщает вам информацию для статьи.

Аналогично, когда вы нажимаете на «Документ 2», появляется окно абстрактной информации для этой статьи. Ниже я делюсь фотографиями того, как это будет выглядеть. Я знаю, что для этого типа анимации требуется либо CSS / Javascript. Я использую шаблон образца веб-сайта для создания. Есть идеи о том, как это сделать на самом деле? Я ценю вашу помощь.

                      <li>
                        <a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
                            <i class="fas fa-edit nav-icon"></i>
                             Paper 1
                        </a>
                    </li>


                        <figure class="effect-honey tm-gallery-item research1">
                            <p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
                        </figure>

Щелчок по бумаге 1
введите описание изображения здесь

Щелчок по бумаге 2
введите описание изображения здесь

Комментарии:

1. этот вопрос очень абстрактный, можете ли вы показать, прежде чем нажать на любую из статей? всплывающая анимация уже существует, и вам не нужно слишком беспокоиться об этом, вы можете использовать jquery для динамического добавления класса, и это сделает вашу работу, или, если вы хотите, чтобы это было проще, использование bootstrap может быть очень полезным даже в будущем

2. есть много способов сделать это, нужно знать, прежде чем нажимать на документы, какова будет высота этой веб-страницы, остановится ли она на paper1 и paper2 или займет всю страницу и оставит пустой белый раздел внизу, который отображается только при нажатии на любую бумагу

Ответ №1:

Вы можете попробовать следующее — я реализовал его на чистом JavaScript, поэтому вам не нужно беспокоиться о внешних библиотеках (вам придется добавить свой собственный стиль, но, надеюсь, механизма будет достаточно):

CSS:

 .hidden {
   display: none
}

HTML

 <!-- control -->
<div>
    <div class="research-paper" id="paper-1">Paper 1</div>
    <div class="research-paper" id="paper-2">Paper 2</div>
    <div class="research-paper" id="paper-3">Paper 3</div>
</div>

<!-- what gets displayed -->
<div class="" id="paper-content-1">Lorem ipsum</div>
<div class="hidden" id="paper-content-2">Lorem ipsum 2</div>
<div class="hidden" id="paper-content-3">Lorem ipsum 3</div>

JavaScript:

 let tracker = 1; // initially it's the first

// get every occurrence of "research-paper" class and add a 'click' eventListener to it
let researchPaperClass = document.getElementsByClassName('research-paper');

for(var j = 0; j < researchPaperClass.length; j  ){
    researchPaperClass[j].addEventListener("click", function(){
        var currentId = this.id.replace("paper-", "");

        // first, add 'hidden' to the previous class
        document.getElementById("paper-content-"   tracker).className  = " hidden";

        // finally, remove 'hidden' from the current clicked one to show it
        document.getElementById("paper-content-"   currentId).className = document.getElementById("paper-content-"   currentId).className.replace(/hidden/gm, "");

        // update the tracker
        tracker = currentId;
    });
}

Ответ №2:

[Подробности здесь][1]

 function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}  
 <div onclick="myFunction()">
                 <li>
                    <a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
                        <i class="fas fa-edit nav-icon"></i>
                         Paper 1
                    </a>
                </li>
</div>

<div style="display:none; background-color:yellow" id="myDIV">
                    <figure class="effect-honey tm-gallery-item research1">
                        <p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
                    </figure>
</div>

Это должно решить проблему для вас .. [1]: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Ответ №3:

включите jquery в свой проект, и это сделает работу

 $(document).on("click",".tab", function(e){
  //prevent default behaviour of a tag
  e.preventDefault()
  
 //element clicked on
 var clickedTab =  $(this);
  //id of the target content
 var tabContentId = $(this).attr('href')
 
  //remove the active class from all tabs and tab content elements
 $('.tab').removeClass('active')
 $('.tab-content').removeClass('active')
 
  //add the active class to clicked tab and corresponding tab content element
 clickedTab.addClass('active');
 $(tabContentId).addClass('active');
 
})  
 .tab{
 color:#aaa;
 display:inline-block;
 padding:5pt 15pt;
}

.tab.active{
color:#fff;
background-color:#839499;
font-weight:bold
}

.tab-content{
display:none
}

.tab-content.active{
display:block
}  
 <!--include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- first tab active by default -->
<a class="tab active" href="#paper1">paper 1<a>
<a class="tab" href="#paper2">paper 2<a>
<a class="tab" href="#paper3">paper 3<a>

<!-- first content active by default -->
<div class="tab-content active" id="paper1">
content for paper 1
</div>

<div class="tab-content" id="paper2">
content for paper 2
</div>

<div class="tab-content" id="paper3">
content for paper 3
</div>

Ответ №4:

Вы могли бы использовать divs. В этом примере я использую кнопки, но должно быть очень легко заставить его работать с имеющимся у вас кодом. Пример:

 <html>
    <head>
        <style>
            .page1 {
                display: none;
            }
            .page2 {
                display: none;
            }
            .page1.add {
                display: contents;
            }
            .page2.add {
                display: contents;
            }
        </style>
    </head>
    <body>
            <button onclick="page1()">Page1</button>
            <button onclick="page2()">Page2</button>
            <div class="page1">
                <p>info about page 1...</p>
            </div>
            <div class="page2">
                <p>info about page 2...</p>
            </div>
            <script>
                function page1() {
                    document.querySelector('.page1').classList.add('add');
                    document.querySelector('.page2').classList.remove('add');
                }
                function page2() {
                    document.querySelector('.page2').classList.add('add');
                    document.querySelector('.page1').classList.remove('add');
                }
            </script>
        </div>
    </body>
</html>

Я надеюсь, что это решит вашу проблему, все, что вы помещаете в div, исчезнет и появится снова. Я уже использовал это простое решение раньше.

Ответ №5:

Вы можете сделать что-то вроде этого (это действительно простой и общий пример, который вы можете изменить по своему усмотрению):

 document.querySelectorAll('.paperTrig').forEach((element) => { element.addEventListener('click', function() { if (document.querySelector('.paper.show')) {document.querySelector('.paper.show').classList.remove('show');} this.nextElementSibling.classList.add('show');});});  
 ul { padding:0; list-style-type: none; display: flex; flex-flow: row nowrap }
.paper { transform: scale(0); transition: transform 0.5s ease-in-out; }
.show { transform: scale(1); }  
 <ul>
  <li>
    <button class="paperTrig">Paper 1</button>
    <div class="paper">
      <h1>Paper 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </li>
  <li>
    <button class="paperTrig">Paper 2</button>
    <div class="paper">
      <h1>Paper 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </li>
  <li>
    <button class="paperTrig">Paper 3</button>
    <div class="paper">
      <h1>Paper 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </li>
  <li>
    <button class="paperTrig">Paper 4</button>
    <div class="paper">
      <h1>Paper 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </li>
</ul>

Приведенный выше код прослушивает событие нажатия на кнопку с классом .paperTrig . Когда пользователь нажимает на эту кнопку, выполняется функция, которая удаляет .show из активного элемента (если он существует) и показывает желаемое содержимое.

В основном он ищет следующий элемент, близкий к нажатой кнопке, и помещает в него show класс.

Анимация CSS достигается с использованием transform и transition .

Ответ №6:

Для этого необходимы CSS и Javascript. Ниже приведен самый простой способ, который поддерживается почти всеми браузерами.

Шаг 1: Отредактируйте свой HTML, добавьте атрибут ‘onClick’ к ссылкам, т.е. onClick =»showContent (1);» и атрибут ‘id’ к содержимому, т.е. id =»research1″

 <li>
    <a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1" onClick="showContent(1);">
    <i class="fas fa-edit nav-icon"></i>
    Paper 1
    </a>
</li>
<li>
    <a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_2" onClick="showContent(2);">
    <i class="fas fa-edit nav-icon"></i>
    Paper 2
    </a>
</li>
    
<figure class="effect-honey tm-gallery-item research1" id="research1">
    <p > This is a paragraph about my first research paper.</p>
</figure>

<figure class="effect-honey tm-gallery-item research2" id="research2">
    <p > This is a paragraph about my second research paper.</p>
</figure>

Числовое значение используется в функции onClick=»showContent(1);» для идентификации ссылки, по которой вы нажали.

Шаг 2. Добавьте CSS, чтобы скрыть второй контент при начальной загрузке страницы

 <style type="text/css">
    #research1 {display:block; } 
    #research2 {display:none; } 
</style>

Шаг 3: добавьте функцию Javascript

 <script type="text/javascript">
function showContent(x) {
    var r1 = document.getElementById("research1");
    var r2 = document.getElementById("research2");
    if(x == 2){                       
        r1.style.display = "none";
        r2.style.display = "block";
    } else {                           
        r1.style.display = "block"; 
        r2.style.display = "none"; 
    }
}
</script>