JavaScript: нажатая ссылка должна исчезнуть эффектным образом - PullRequest
Новая
       7

JavaScript: нажатая ссылка должна исчезнуть эффектным образом

1 голос
/ 22 декабря 2010

Я запрограммировал скрипт PHP / PostgreSQL / Oracle для внутреннего использования в моей работе, где ссылки отображаются в виде светло-голубых «тегов», которые также можно скрыть, нажав «x» рядом с ними:

alt text

Это работает довольно хорошо, и мои коллеги уже впечатлены.

CSS-внешний вид для «тегов», которые я украл из Stackoverflow (поскольку мои собственные навыки 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, потому что я его еще не изучил.

Спасибо и надеюсь на ваше творчество :-) Alex

Ответы [ 3 ]

2 голосов
/ 22 декабря 2010

Чистый эффект затухания javascript будет ( для браузеров не IE) на данный момент .. ) 

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

demo : http://jsfiddle.net/gaby/AkA5C/

Я обернул тег и кнопку в <span></span>, чтобы вы могли легко нацелить оба.

0 голосов
/ 22 декабря 2010

Я советую не использовать яркие «взрывные» эффекты в вашем приложении, в конце концов, пользователи используют ваше приложение, потому что оно решает проблему не показа.Если вам нужны эффекты, используйте простые эффекты.Если вы ДОЛЖНЫ использовать такие эффекты, используйте другую технологию, например, вспышку.

0 голосов
/ 22 декабря 2010

Использовать jQuery эффекты .Легко как черт и выглядит круто

...