본문 바로가기

Python_WEB/JavaScript

[Ch12]jQuery, Ajax, JSON 연습문제 3

반응형

Q>

animate() 함수를 이용해 다음과 같은 결과를 생성하는 jQuery 코드를 작성하라.

 

A>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Quiz 3</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            $("#right").click(function () {
                $("#jquery").animate({ left: '100px' });
            });
            $("#left").click(function () {
                $("#jquery").animate({ right: '100px' });
            });
        });
    </script>
</head>

<body>
    <button id="left">&lt;&lt;</button>
    <button id="right">&gt;&gt;</button><br />
    <img id="jquery" src="jquery.png" width="200px" alt="jqery" style="position: relative; padding-left: 100px;">
</body>

</html>

 

R>

 

HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초
국내도서
저자 : 천인국
출판 : 인피니티북스 2013.12.19
상세보기
반응형