私は画像をクリックする必要があるウェブサイトを作っています。画像をクリックすると、画面の中央に拡大表示されます。もう一度クリックすると、再び小さくなり、その場所に戻ります。画像をクリックすると拡大します。もう一度クリックすると最小化します
$(document).ready(function() {
$("#header").load("header.html .header");
$("#footer").load("footer.html .footer");
$("body").on('click', function(){
if(!$(".img1, .img2").hasClass('enlarged')){
$(".img1, .img2").on('click',function(){
$(this).addClass('enlarged');
});
}else{
$("body").on('click', '.enlarged', function(){
$(this).removeClass('enlarged');
});
}
});
});
.enlarged{
position:absolute;
z-index:2;
width:500px;
height:600px;
top:-10%;
left:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<aside class="aside"><img src="fotos/foto1.JPG" id="img1" class="img1" style="transform:rotate(90deg);"/><img src="fotos/foto2.JPG" class="img2" style="transform:rotate(90deg);"/></aside>
<div class="box"></div>
</div>
私の現在のスクリプトは動作しますが、非常にグラグラです。それは一度拡大するだけで、トリプルクリックする必要があります。
私はすでにそれについて前にquestionを作っていましたが、更新した後に誰も答えませんでした。
また、スタックオーバーフローでイメージを追加する方法がわからない場合は、スニペットを作成しました。
ようこそ!ありがとうございました!私は忙しかったので、申し訳ありません。私はあなたのものに近かった。私が持っていたものは働いていなかったからです。私は非論理的なことをやり始めた。 toggleClassが何の理由もなく動作しなくなる前に。今それはそうする。再度、感謝します! ^^ – FllnAngl