반응형
[jQuery] 움직이는 이미지
imageMove.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>움직이는 물고기</title> <style type="text/css"> #panel { width:600px; height:300px; border:1px solid #999; position:relative; left:100px; right:100px; background:url("images/bg.png") no-repeat; } #bar { width:500px; height:20px; position:absolute; left:50px; top:190px; background:#f00; } #fish { position:absolute; left:50px; top:120px; } #navi { text-align:center; position:relative; width:600px; left:100px; top:250px; } #btn { font-size:1em; font-weight:bold; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#btn").focus(); var x = 50; //출력될 left 값을 저장하기 위한 변수 var sw = 50; //증가 또는 감소되는 값을 저장하기 위한 변수 jQuery("#btn").click(function() { x += sw; jQuery("#fish").css("left", x); if(x >= 450) { sw = -50; jQuery("#fishImg").attr("src", "images/fish2.png"); } if(x <= 50) { sw = 50; jQuery("#fishImg").attr("src", "images/fish1.png"); } }); }); </script> </head> <body> <h1>움직이는 물고기</h1> <hr/> <div id="panel"> <div id="bar"></div> <div id="fish"> <img src="images/fish1.png" id="fishImg"> </div> <div id="navi"> <button type="button" id="btn"> 버튼을 누르면 물고기 움직입니다. </button> </div> </div> </body> </html> |
| 출력결과 |
반응형
'jQuery' 카테고리의 다른 글
| [jQuer] 움직이는 애니메이션 (0) | 2016.01.03 |
|---|---|
| [jQuery] 이미지 출력 및 숨기기 (0) | 2016.01.03 |
| [jQuery] 무한 스크롤 이벤트 (0) | 2016.01.03 |
| [jQueyr] On / Off 이벤트 (0) | 2016.01.03 |
| [jQuery] input 이벤트 (0) | 2015.12.29 |
