ホームページ > 記事 > 毎日のプログラミング > jqueryを使用して画像反転効果を実現する方法
jqueryを使用して画像反転効果を実現する方法
- 藏色散人オリジナル
- 2018-12-15 16:53:297649ブラウズ
jquery は、jQuery attr() メソッドを使用して画像反転効果を実現できます。次に、jquery attr() メソッドを使用して画像ソース (つまり、タグ の src 属性) を変更し、画像反転効果を実現します。
画像反転効果を実現する jquery メソッド を簡単なコード例とともに紹介します。
コード例は次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery实现图片翻转效果示例</title>
<style>
.card{
margin: 30px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("img").click(function(){
// 改变图片的src属性
$(this).attr("src", "./images/1.jpg");
});
});
</script>
</head>
<body>
<div class="card">
<img src=".images/2.jpg" alt="Poker Card">
</div>
</body>
</html>ここでは、最初に画像 (2.jpg) を定義し、次にこの画像にクリック イベントを追加します。この画像がクリックされたときにトリガーされます。 clickedattr() メソッドは、画像の src 属性を変更します。つまり、別の画像 (1.jpg) を置き換えます。
最終的な画像反転効果は次のとおりです。
attr() メソッド は、選択したオブジェクトの属性値を設定または返すことができます。要素 。メソッドのパラメータに応じて、動作方法も異なります。
注: このメソッドを使用して属性値を返すと、最初に一致した要素の値が返されます。
このメソッドを使用して属性値を設定すると、一致する要素に対して 1 つ以上の属性/値のペアが設定されます。
この記事は、画像反転効果を実現するための jquery の具体的な実装方法について説明したもので、困っている友人の役に立てば幸いです。
以上がjqueryを使用して画像反転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。