JavaScript：点击的链接应该以一种壮观的方式消失-解网

问：

我已经编写了一个 PHP/PostgreSQL/Oracle 脚本供我工作内部使用，其中链接显示为浅蓝色的“标签”，也可以通过单击它们附近的“x”来隐藏：

alt text

到目前为止，这效果很好，我的同事们已经印象深刻了。

我从 Stackoverflow 中窃取的“标签”的 CSS 外观（因为我自己的 CSS/JS 技能非常有限，而且模仿是最真诚的奉承形式）：

a.hide {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.hide:hover {
        background-color: #e7540c;
        color: #E0EAF1;
        border-bottom: 1px solid #A33B08;
        border-right: 1px solid #A33B08;
        text-decoration: none;
}

a.tag {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.tag:hover {
        background-color: #3E6D8E;
        color: #E0EAF1;
        border-bottom: 1px solid #37607D;
        border-right: 1px solid #37607D;
        text-decoration: none;
}

现在，我想通过几行 JavaScript 来增强我的脚本，并以一种有趣的方式使“标签”消失，当用户单击它们附近的“x”时（当然，链接应该仍然有效）。也许让它们飞起来，甚至可能爆炸？有人在这里有想法或可以分享一个好技巧吗？

我不想使用jQuery，因为我还没有学会它。

谢谢你，我希望你的创造力：-）亚历克斯

javascript css 不显眼-javascript

你的两个陈述是不一致的 - 因为我自己的 CSS/JS 技能非常有限，我宁愿不使用 jQuery，因为我还没有学会它。 - 如果你还在学习JS，jQuery的学习曲线较浅，可以帮助你避免很多常见的JS问题。如果您已经精通或专家 JS 编码员，那么 jQuery 可能对这项任务没有用。如果我是你，我会更喜欢jQuery解决方案。

0赞 Alexander Farber 12/23/2010

而且我想知道我的链接是否仍然适用于jQuery爆炸效果，以及如何将其应用于“标签”，当单击“x”（即不是相同的元素）时？

答：

0赞 Mark Baijens 12/23/2010 #1

使用 jQuery 效果。简单，看起来很酷

我建议不要在你的应用程序中使用华丽的“爆炸性”效果，归根结底，用户正在使用你的应用程序，因为它解决了一个不被展示的问题。如果必须有效果，请使用简单效果。如果您必须使用此类效果，请使用其他技术，例如闪光灯。

var hides = document.getElementsByClassName('hide');

for (var i = 0 ; i < hides.length; i++)
{
    hides[i].onclick = function(evt){
        var el = this.parentNode;
        el.style.opacity=1;
        var el_timeout = setInterval(function(){
            el.style.opacity -= 0.05;
            console.log(el.style.opacity);
          if (el.style.opacity <= 0.05)
          {
              el.parentNode.removeChild(el);
              clearInterval(el_timeout);
          }
        },20);
    }
}

演示：http://jsfiddle.net/gaby/AkA5C/

我已将标签和按钮包装在一个中，以便您可以轻松地定位两者。<span></span>

JavaScript：点击的链接应该以一种壮观的方式消失

JavaScript: clicked link should disappear in a spectacular way

评论

评论

评论

评论