- jquery mouseenter mouseleave 할 때 배경 이미지 변경하기

 

사용자 정의 속성 data-image은 a태그에 넣어도 된다.

제이쿼리에서 attr(data-image)로 가져오기

    <div class="container">
        <ul class="navi">
            <li data-image="../img/portrait/portrait-01.jpg">
                <a href="#none">ABOUT</a>
            </li>
            <li data-image="../img/portrait/portrait-02.jpg">
                <a href="#none">INSTRUCTION</a>
            </li>
            <li data-image="../img/portrait/portrait-03.jpg">
                <a href="#none">CLASS</a>
            </li>
            <li data-image="../img/portrait/portrait-04.jpg">
                <a href="#none">LOCATION</a>
            </li>
        </ul>
        <div class="photo"></div>
    </div>
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
body {
    margin: 0;
}
.navi {
/* 중앙정렬 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    list-style: none;
    padding: 0;
    margin: 0;
    
 /* 배경위로 올라오게 */
    z-index: 100;
}
.navi li {}
.navi li a {
    /* 4em == 64 */
    font-size: 4em;
    color: #fff;
}
.photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url(../img/portrait/portrait-initial.jpg) no-repeat center center; */
    background-image: url(../img/portrait/portrait-initial.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: 0.5s;
/* 제이쿼리에서 백그라운드 이미지만 변경 */
}

 

 

// li에 마우스가 올라갈 때
$('.navi li').mouseenter(function() {
    var imgPath = $(this).attr('data-image');
    $('.photo').css({ 
        'background-image':'url('+ imgPath +')' 
    });
});
$('.navi li').mouseleave(function() {
    $('.photo').css({
        'background-image': ''
    });    
});

 

'Web > Java Script' 카테고리의 다른 글

jquery - 오디오 볼륨 조절  (0) 2021.07.20
jquery - 폰트어썸으로 찜(like button) 만들기  (0) 2021.07.17
tab menu (with jquery) #1-1 완성  (0) 2021.07.15
tab menu (with jquery) #1 프로토타입  (0) 2021.07.15
js 변수와 조건문 - 20세 체크, 별점 주기(with jquery)  (0) 2021.07.14

- click 함수

a태그 보이기 클릭 ->  p display: block 

a태그 감추기 클릭 -> p display: none

    <div>
        <h2>p 태그 감추기</h2>
        <a href="#none" class="show-btn">보이기</a>
        <a href="#none" class="hide-btn">감추기</a>
        <p>
            태그선택자 a를 클릭했습니다.
        </p>
    </div>
// custom.js

// css()는 사용하기보다는 css파일에 직접 작성하는 것이 좋다. 예시로 작성
$('p').css({'display':'none'});

// 클래스이름이 .show-btn을 클릭 
$('.show-btn').click(function() {
    $('p').css({'display':'block'});
});
$('.hide-btn').click(function() {
    $('p').css({'display':'none'});
});

 

- show() hide() 메서드

<head>
    <style>
        a {
            display: inline-block;
            padding: 5px;
            color: #000;
            background-color: #ddd;
            width: 100px;
            text-align: center;
        }
        .box {
            margin-top: 10px;
            width: 220px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: dodgerblue;
            color: #fff;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <h2>show hide</h2>
        <a href="#none" class="show">보이기</a>
        <a href="#none" class="hide">감추기</a>
        <div class="box">box</div>
    </div>
    
    <!-- js -->
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>
// custom.js
// show() hide() 메서드 사용
$('.show').click(function() {
    $('.box').show();
});
$('.hide').click(function() {
    $('.box').hide();
})

 

 

- mouseenter, mouseleave 함수

mouseenter 마우스를 올렸을 때

mouseleave 마우스가 떠날 때

 

나머지 css는 위랑 같음

width 값만 210px로 변경 

팝업(모달창)은 click함수, 네비게이션은 mouseenter함수를 보통 사용한다.

    <div>
        <h2>mouseenter</h2>
        <a href="#none" class="btn">show/hide</a>
        <div class="box">Box</div>
    </div>
$('.btn').mouseenter(function() {
    $('.box').show();
});
$('.btn').mouseleave(function() {
    $('.box').hide();
});

 

 

 

- 필수 함수 : click mouseenter mouseleave

 

- 메서드(이펙트) :

.show() .hide()

 

.slideDown() .slideUp()

.fadeIn() .fadeout()

.stop()

 

- 메서드(클래스 제어) :

.addClass() .removeClass() .toggleClass()

 

- 메서드(요소 탐색) :

.children() .siblings()

.parent()

.find() .next() .prev()

 

'Web > Java Script' 카테고리의 다른 글

tab menu (with jquery) #1 프로토타입  (0) 2021.07.15
js 변수와 조건문 - 20세 체크, 별점 주기(with jquery)  (0) 2021.07.14
제이쿼리(jQuery) 시작하기 #4 addClass(), children()  (0) 2021.07.10
제이쿼리(jQuery) 시작하기 #3 효과 메서드 (slideDown|Up, fadeIn|Out)  (0) 2021.07.10
제이쿼리(jQuery) 시작하기 #1 폴더구조, 링크  (0) 2021.07.09

+ Recent posts

티스토리툴바