图片有声音链接和动画链接_让我们制作一些动态的动画链接

最新推荐文章于 2021-06-01 05:02:27 发布

daique1908

最新推荐文章于 2021-06-01 05:02:27 发布

阅读量1.9k

点赞数

文章标签： css java js python html ViewUI

图片有声音链接和动画链接

在单个页面上为较长的书面内容创建标记时，创建导航结构以在该文本的不同部分之间跳转通常很重要。 HTML本身支持此功能，这使我们可以跳至页面中的各个部分，甚至可以直接从外部链接访问它们。

在本教程中，我们将讨论一种使用JavaScript动态生成这些链接，然后使用CSS对其进行动画处理的技术。让我们潜入吧！

标记

第一步是为您的书面作品创建合适的标记。我们假设您有一篇article ，并且在该文章内有许多section ，每个都有自己的h1标签和后续内容。

您HTML可能如下所示：

<article>
  <section id="part-one">
    <h1>Here’s one part</h1>
    <p>Mobilize pride fundraising campaign, foundation criteria save lives human rights donate empowerment. Generosity climate change, vulnerable population global leaders lasting change. Outcomes, honesty developing nations disruption human-centered design; progress implementation UNHCR many voices process.</p>
    <p>The Elders; complexity celebrate; legal aid diversification sanitation social entrepreneurship open source assistance contribution community health workers. </p>
  </section>
  <section id="part-two">
    <h1>Here’s another</h1>
    <p>Expanding community ownership; Kickstarter public service collaborative consumption, employment Rockefeller public-private partnerships transformative tackling. Partner Aga Khan informal economies necessities collaborative cities public institutions opportunity nutrition.</p>
  </section>
  <section id="part-three">
    <h1>And yet one more</h1>
    <p>Public sector free expression meaningful, enabler; Andrew Carnegie Bloomberg, emergent involvement globalization crisis situation. Gender, gender equality truth long-term improving quality youth civic engagement equality scalable end hunger sustainable Medecins du Monde agency change lives.</p>
    <p>Social analysis, affiliate; cornerstone life-saving grantees Jane Addams free-speech, change movements lifting people up social challenges positive social change disruptor future.</p>
  </section>
</article>

注意：如您所见，我们将id应用于各个部分。我们之所以选择这样做，是因为id实际上与节本身有关，而不与h1标签有关。

要跳转到页面上具有给定id的元素，请创建一个带有href值（等于其后跟id的哈希值）的锚标记。例如，在上面的示例内容中，跳至第二部分，我们可以创建以下链接：

<a href="#part-two">Second section</a>

有很多方法可以做到这一点：您可以手工编写链接的代码，也可以使用抽象的方法来构建包含链接HTML部分。但是，在本教程中，我们将使用JavaScript动态生成链接。

香草JS

这是JavaScript：

var sections = document.querySelectorAll('section');
for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
  var id = section.id;
	var h1 = section.querySelectorAll('h1')[0];
  var text = h1.innerHTML;
  h1.innerHTML = "<span>" + text + "</span>" + "<a href='#"+ id +"'>"+ id +"</a>";
}

jQuery版本

这是一个jQuery版本，基本上实现了相同的目的：

$('article section').each(function(i,el){
  var id = $(this).attr('id');
  var h1 = $(this).find('h1').first();
  var t = h1.text();
  h1.html("<span>" + t + "</span>");
  h1.append("<a href='#"+id+"'>#"+id+"</a>");
});

两者给出相同的结果。我们寻找给定文章的所有部分后代，并为每一个找到该部分的id 。然后，我们建立一个指向该id的链接，并将其附加到header元素。我们还将现有文本包装在一个跨度中，以提供更灵活的样式。

说到造型…

接下来，让我们应用一些基本CSS来提供隐藏和显示效果：

@import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400,700);
body {
  font-family: "Fira Sans", sans-serif;
  color: #444;
}
article {
  width: 90%;
  margin: 0 auto;
}

h1 {
  position: relative;
  span {
    float: left;
  }
  a {
    transition: all .4s;
    opacity: 0;
    color: #FD9148;
    font-weight: 300;
    margin-left: 12px;
    text-decoration: none;
  }
  &:hover {
    a {
      text-indent: 0;
      opacity: 1;
    }
  }
}

这些规则首先设置一些基本样式。 font ， color ，文章width等。然后，我们声明a （我们之前通过JavaScript附加了a ）将对其应用过渡，并且默认情况下其不透明度为0。只有当我们将鼠标悬停在它上面时，它的不透明度才会增加到1，从而使我们具有渐隐效果。

就是这样！现在，我们可以在操作中相对简单地实现此技术：