특정 단어만 깜빡임 효과주기

특정 단어만 깜빡임 효과주기

QA

특정 단어만 깜빡임 효과주기

본문

안녕하세요

아래와 같이 [오리] 글자가 있으면 [오리 너구리 돼지 사자 감자] 이부분이 전체

깜빡임 효과가 나타나는데

[오리 너구리 돼지 사자 감자] => [오리] 나 [너구리]

만 깜빡이게 수정할수 있나요? 

감사합니다.

 

<p id="Java_Msg">오리 너구리 돼지 사자 감자</div>

 

var ti                    = 0;

if("$('#Java_Msg').text():contains('오리')" || "$('#Java_Msg').text():contains('너구리')") {
      clearInterval(ti);
      ti = setInterval(function () {
           $('#Java_Msg').animate({'opacity': 0} ,100 , function () {
                   $('#Java_Msg').animate({'opacity': 1}, 500);
              });
       }, 1500);
 }

이 질문에 댓글 쓰기 :

답변 1


<div id="Java_Msg">오리 너구리 돼지 사자 감자</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function Java_Msg_Partial(el) {
    var ti = setTimeout(function () {
        $(el).animate({'opacity': 0} ,100 , function () {
            $(el).animate({'opacity': 1}, 500, function () {
                clearTimeout(ti);
                Java_Msg_Partial(el);
            });
        });
    }, 1500);
}
if("$('#Java_Msg').text():contains('오리')" || "$('#Java_Msg').text():contains('너구리')") {
    var Java_Msg = document.getElementById('Java_Msg');
    Java_Msg.innerHTML = Java_Msg.innerHTML.replace(/([^\s]+)/g, '<span class="$1">$1</span>');
    
    Java_Msg_Partial(document.querySelector('#Java_Msg .오리'));
    Java_Msg_Partial(document.querySelector('#Java_Msg .너구리'));
}
</script>

안녕하세요.
아래처럼 오리 좋아  공백이 들어가면 인식이 안되네요
그리고 오리 좋아만 색상을 바꾸고 싶은데
style='color:red;font-weight:bold;' 
어디에 넣어야 할까요
답변 감사합니다.

if("$('#Java_Msg').text():contains('오리 좋아')"
  Java_Msg_Partial(document.querySelector('#Java_Msg .오리 좋아'));


<div id="Java_Msg">오리 좋아 너구리 돼지 사자 감자 감자</div>

<style>
.blink {
    animation: blink 2100ms infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    5% { opacity: 0; }
    50% { opacity: 1; }
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var container = document.getElementById('Java_Msg');
var contains_arr = ['오리 좋아', '자 감'];
var contains_result = contains_arr.some((x) => { return $(container).text().indexOf(x) > -1; });

if(contains_result == true) {
    contains_arr.forEach((txt) => {
        container.innerHTML = container.innerHTML.replace(new RegExp('(?<!>)' + txt + '(?!<)', 'g'), function (args) {
            return `<span class="blink">${args}</span>`;
        });
    });
}
</script>

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT