<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("#first").click(function(){ $(this).removeAttr("id").addClass("enlarge").attr("src","img/after.png"); }); }); </script> <style> #first{ cursor:pointer; } .enlarge{ position:fixed; top:50%; left:50%; width:400px; height:400px; margin-top:-200px; margin-left:-200px; } </style> </head> <body> <img id="first" src="img/before.png"> <img src="img/before.png"> <img src="img/before.png"> </body> </html>
アニメーションを使った例
<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("#first").click(function(){ $(this).removeAttr("id").addClass("enlarge").attr("src","img/after.png"); }); }); </script> <style> #first{ cursor:pointer; position:absolute; top:20px; left:20px; } #second{ position:absolute; top:20px; left:240px; } #third{ position:absolute; top:20px; left:460px; } .enlarge{ -webkit-animation-name:move; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:lineart; -webkit-animation-duration:1s; -webkit-animation-direction:alternate; position:absolute; top:50%; left:50%; width:400px; height:400px; margin-top:-200px; margin-left:-200px; z-index:4; } @-webkit-keyframes move { 0%{ top:5%; left:5%; width:200px; height:200px; margin-top:0; margin-left:0; z-index:4; } 100%{ top:50%; left:50%; width:400px; height:400px; margin-top:-200px; margin-left:-200px; z-index:4; -webkit-transform:rotate(360deg); } } </style> </head> <body> <img id="first" src="img/before.png"> <img id="second" src="img/before.png"> <img id="third" src="img/before.png"> </body> </html>