jqueryを使用して画像反転効果を実現する方法-HTMLの知識-php.cn

ホームページ

毎日のプログラミング

HTMLの知識

jqueryを使用して画像反転効果を実現する方法

藏色散人

Dec 15, 2018 pm 04:53 PM

jquery は、jQuery attr() メソッドを使用して画像反転効果を実現できます。次に、jquery attr() メソッドを使用して画像ソース (つまり、タグ jqueryを使用して画像反転効果を実現する方法の src 属性) を変更し、画像反転効果を実現します。

jqueryを使用して画像反転効果を実現する方法

画像反転効果を実現する 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="/static/imghwm/default1.png"  data-src=".images/2.jpg"  class="lazy"   alt="Poker Card">
</div>
</body>
</html>

ここでは、最初に画像 (2.jpg) を定義し、次にこの画像にクリックイベントを追加します。この画像がクリックされたときにトリガーされます。 clickedattr() メソッドは、画像の src 属性を変更します。つまり、別の画像 (1.jpg) を置き換えます。

最終的な画像反転効果は次のとおりです。

jqueryを使用して画像反転効果を実現する方法

attr() メソッド は、選択したオブジェクトの属性値を設定または返すことができます。要素。メソッドのパラメータに応じて、動作方法も異なります。

注: このメソッドを使用して属性値を返すと、最初に一致した要素の値が返されます。

このメソッドを使用して属性値を設定すると、一致する要素に対して 1 つ以上の属性/値のペアが設定されます。

この記事は、画像反転効果を実現するための jquery の具体的な実装方法について説明したもので、困っている友人の役に立てば幸いです。

以上がjqueryを使用して画像反転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、