ホームページ > ダウンロード >  JS効果 > 画像の特殊効果

  • 純粋な CSS3 Web ページの写真のマウスオーバー効果

    Pure CSS3 Web ページの写真のマウスオーバー効果。マウスをホバーすると、画像の境界線がレイヤーごとに拡大されます。 IE9、Chrome、Firefoxブラウザをサポートします。 説明書:### 1. ヘッド領域参照ファイル lrtk.css 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。

    画像の特殊効果16422017-03-11
  • 超クールなCSS3画像3D回転効果

    非常にクールな CSS3 画像の 3D 回転効果マウスをホバーすると、画像が反対側に 3D 回転します。 Chrome および Firefox ブラウザと互換性があります。 説明書:### 1. ヘッド領域参照ファイルcomponent.css、demo.css、normalize.css 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。 4. 画像パスを変更するには、component.css を開いてください。

    画像の特殊効果18832017-03-11
  • 15個のCSS3画像ホバー効果コード

    15種類のCSS3画像ホバーエフェクトコード、超実用的、IE9、Chrome、Firefoxブラウザと互換性があります。 説明書:### 1. ヘッド領域にスタイルシートファイルnormalize.css、demo.css、component.cssを導入します。 2. 必要な効果を選択します: <figure class="effect-lily"> ... </figure> はユニット効果です 3. 3 つの CSS ファイルは、ニーズに応じて適切に合理化できます

    画像の特殊効果19752017-03-11
  • 5 CSS3 アイコンのマウスオーバー効果

    5 CSS3 アイコンのマウスオーバー効果。画像の上にマウスを置くと効果が表示されます。主要ブラウザに対応。 説明書:### 1. ヘッド領域参照ファイル lrtk.css 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。

    画像の特殊効果18342017-03-11
  • 6 画像のマウスオーバー効果の JS コード

    6 画像のマウスオーバー効果の JS コード. 画像の上にマウスを置くと、テキスト タイトルが 6 つの異なるアニメーション形式で表示されます. 主流のブラウザーと互換性があります. PHP 中国語 Web サイトのダウンロードをお勧めします! 説明書:### 1. ヘッド領域は CSS ファイル modernizr.custom.js を参照します。 2. !-- code start --!-- code end --region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。

    画像の特殊効果20382017-03-11
  • jQuery自動スクロール5画面画像バナーコード

    jQuery は 5 画面の画像バナー コードを自動的にスクロールし、左右のボタンで画像を切り替えます。マウスを画像に移動すると画像が強調表示され、クリックすると影付きの大きな画像が表示されます。主流のブラウザと互換性があるため、PHP 中国語 Web サイトからダウンロードすることをお勧めします。 説明書:### 1. 先頭領域は lrtk.css ファイルと js ライブラリを参照します 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。

    画像の特殊効果20622017-03-11
  • 強烈な画像の全画面ブラウジング プラグイン (jQuery)

    強力な画像全画面閲覧プラグイン (jQuery) 画像上でマウスをクリックすると、画像を全画面で閲覧できます。マウスを動かすと、画像の別の部分を表示できます。フォト アルバムに適しています。画像の詳細を表示します。主流のブラウザと互換性があるため、PHP 中国語 Web サイトからダウンロードすることをお勧めします。 説明書:### 1. ヘッド領域は、styles.css および Intensity.js ファイルを参照します。 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。 4. CSS ファイルのdemo-image first、.demo-image.next、.demo-image.thirdのbackground-image属性を変更します。

    画像の特殊効果17312017-03-11
  • jQuery画像背景壁スポットライト効果コード

    jQuery 画像背景壁スポットライト効果コード. マウスを特定の画像の上に置くと、その画像は明るくなり、他の画像は暗くなります。主流のブラウザと互換性があるため、PHP 中国語 Web サイトからダウンロードすることをお勧めします。 説明書:### 1. ヘッド領域は、ファイル lrtk.css および jquery を参照します。 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。 4. 画像の透明度を変更します。不透明度: 0.2、値の範囲は 0 ~ 1 の間の小数です。

    画像の特殊効果17592017-03-11
  • jQuery画像コンテンツのタブの展開と折りたたみ

    jQuery画像コンテンツはタブを展開/折りたたみし、画像をクリックすると対応するテキスト説明が表示されます。主流のブラウザと互換性があるため、PHP 中国語 Web サイトからダウンロードすることをお勧めします。 説明書:### 1. 先頭領域は以下のファイルを参照します <link rel="stylesheet" href="css/jquery.gridquote.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gridquote.min.js"></script> 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 画像フォルダー内の画像を対応するパスにコピーします。 4. 次の js コードを導入します。 <スクリプトタイプ="text/javascript"> $(ドキュメント).ready(関数($){ $('.grid-container').gridQuote(); }); </スクリプト>

    画像の特殊効果13822017-03-11
  • jQuery small2big 画像ズーム プラグイン

    jQuery small2big 画像スケーリング プラグイン、主流のブラウザと互換性あり、PHP 中国語 Web サイトでのダウンロードをお勧めします。 説明書:### 1. ヘッド領域はファイル css および js ライブラリを参照します 2. ファイルに HTML コードを追加します。1 つの li が 1 つの画像に対応します。画像フォルダー内の画像には、1.jpg、2.jpg、... という番号で名前が付けられます。 <ul class="s2b_col" id="s2b_col"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 3. 次の js コードを導入します。 $(document).ready(function(){ $("#s2b_col").small2big({ s2bRadius: 170, // 画像を拡大したときの円枠の半径 s2bColLiRowMargin: -10, //各円間の距離 s2bLiBorderColor: "#000" // 円の境界線の色 // s2bLiAlign: "V" ピクチャの縦方向の配置 }).initS2bCol().addS2bFunction(); });

    画像の特殊効果16982017-03-11
  • jQueryカードスタイルの画像回転コード

    jQueryカード風の画像回転コードです クリックすると画像を左右に切り替えることができます 上部のレインボーナビゲーション効果も良好です 主流のブラウザと互換性があります PHP中国語サイトのダウンロードを推奨します! 説明書:### 1. ヘッド領域にreset.cssとstyle.cssを導入します。 2. jquery-1.4.2.min.js、roundabout.js、roundabout_shapes.js、gallery_init.jsをヘッド領域に導入します 3. 本文領域にコードコメント部分 を追加します。 4. 現在のナビゲーションは class="current" でマークされます。

    画像の特殊効果17232017-03-11
  • jQuery は京東写真の明るくなったり暗くなったりする効果を模倣します。

    jQuery は京東の写真の明るくなったり暗くなったりする効果を模倣しており、写真の上にマウスを置くと、その写真は明るくなり、他の写真は暗くなります。マウスを遠ざけると、すべての写真が明るくなります。主流のブラウザと互換性があるため、PHP 中国語 Web サイトからダウンロードすることをお勧めします。 説明書:### 1. 先頭部分は lrtk.css ファイルと js ライブラリを参照しており、animate.js は別途作成したアニメーション関数です。 <link href=" css/lrtk.css" rel="stylesheet"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/animate.js"></script> <script type="text/javascript" src="js/lrtk.js"></script> 2. class="one" は、1 列に 2 つの画像を保持できる div ブロックを表します。 class="two" は、1 列に 1 つの画像を保持できる div ブロックを表します。テキストの説明は、対応する にあります。 div ブロックをクラス text で変更します。 3. JS コードでは、opacity パラメータで透明度を調整し、3 番目のパラメータで速度を調整します。 animate(imgs[i],{left:0,opacity:1},100);

    画像の特殊効果15962017-03-11
  • 画像上のjQueryマウスオーバー効果

    jQuery には、画像上にマウスをホバーすると効果があります。マウスをホバーするとマスク効果が表示され、テキストがフェードインおよびフェードアウトします。主流のブラウザーと互換性があります。PHP 中国語 Web サイトのダウンロードをお勧めします。 説明書:### 1. 先頭領域は lrtk.css ファイルと js ライブラリを参照します <link rel="stylesheet" type="text/css" href="css/lrtk.css" media="all"> <script type="text/javascript" src="js/jquery.min.js"></script> 2. <!-- code start -->><!-- code end -->region code をファイルに追加します。 3. 具体的な微調整については、コード コメント を参照してください。 4. コード内のテキストとジャンプ リンクが変更されます。 <div class="バナー"> <!-- 画像を変更 --> <a href="http://www.lanrentuku.com/" target="_blank"> <img height="125" width="125" alt="メールチンパンジー" src="images/seagaia_miyazaki.jpg" /> </a> <!-- テキストを変更 --> <p class="companyInfo">画像情報 5</p> <div class="cornerTL"></div> <div class="cornerTR"></div> <div class="cornerBL"></div> <div class="cornerBR"></div> </div>

    画像の特殊効果14612017-03-11
  • jqzoomピクチャーアンプコード

    jqzoom 画像アンプ コード、製品画像の表示に適しており、主流のブラウザと互換性があり、PHP 中国語 Web サイトでのダウンロードをお勧めします。 説明書:### 1. ヘッド領域に を導入する <link rel="stylesheet" href="css/jqzoom.css" type="text/css"> 2. jsライブラリの導入 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> 3. jqzoom関数ライブラリを呼び出します <スクリプトタイプ="text/javascript"> $(関数() { var オプション = { zoomWidth: 250, //虫眼鏡の幅 zoomHeight: 250,//虫眼鏡の高さ ズームタイプ:'reverse' }; $(".jqzoom").jqzoom(オプション); }); </スクリプト> 設定パラメータ: zoomType、デフォルト値: 'standard'、別の値は 'reverse'、元の画像を半透明のレイヤーで覆うかどうか。 zoomWidth、デフォルト値: 200、拡大されたウィンドウの幅。 zoomHeight、デフォルト値: 200、拡大されたウィンドウの高さ。 xOffset、デフォルト値: 10、元のイメージに対する拡大ウィンドウの x 軸オフセット値は負の値にすることができます。 yOffset、デフォルト値: 0、元のイメージに対する拡大ウィンドウの y 軸オフセット値は、負の値にすることができます。 位置、デフォルト値: 'right'、拡大されたウィンドウの位置。値は 'right'、'left'、'top'、'bottom' にすることもできます。 レンズ、デフォルト値: true、false の場合、レンズは元の画像に表示されません。 imageOpacity、デフォルト値: 0.2、zoomType の値が「reverse」の場合、このパラメータはマスクの透明度を指定するために使用されます。 title、デフォルト値: true、拡大ウィンドウにタイトルを表示します。値は a マークのタイトル値にすることができます。そうでない場合は、元の画像のタイトル値です。 showEffect、デフォルト値: 'show'、ウィンドウを拡大する効果を表示します。値は 'show'、'fadein' です。 HideEffect、デフォルト値: 'hide'、拡大されたウィンドウを非表示にするときの効果: 'hide'、'fadeout'。 fadeinSpeed、デフォルト値: 'fast'、拡大されたウィンドウのフェードイン速度 (オプション: 'fast'、'slow'、'medium')。 fadeoutSpeed、デフォルト値: 'slow'、拡大されたウィンドウのフェードアウト速度 (オプション: 'fast'、'slow'、'medium')。 showPreload、デフォルト値: true、ロードプロンプトを表示するかどうか ロードズーム (オプション: 「true」、「false」)。 preloadText、デフォルト値: '読み込みズーム'、カスタム読み込みプロンプト テキスト。 preloadPosition、デフォルト値: 'center'、読み込みプロンプトの位置。値を 'bycss' にして CSS を通じて位置を指定することもできます。

    画像の特殊効果16182017-03-11
  • 2 つの html5 画像表示効果

    2種類のHTML5画像表示効果、スムーズなアニメーション効果、主流ブラウザと互換性あり、PHP中国語サイトでのダウンロードを推奨! 説明書:### 1. ヘッド領域にスタイル シート ファイル app.css、index.css、fonts.css を導入します。 2. <!-- code start --><!-- code end --> コメントエリアコードを Web ページに追加します 3. アイコンはすべて Web オープン フォントを使用しています。特定のファイルについては、css ディレクトリを参照してください。

    画像の特殊効果16772017-03-11
  • jQuery は、正方形の画像上にマウスを置くと丸いエッジ効果に切り替わります。

    jQuery は、正方形の画像を通過するときにマウスをラウンド エッジ効果に切り替えます。画像をクリックすると、チーム ページの表示に適したフローティング レイヤーがポップアップ表示されます。主流のブラウザと互換性があります。PHP 中国語 Web サイトのダウンロードをお勧めします。 説明書:### 1. スタイルシートファイル lrtk.css をヘッド領域に導入します 2.ヘッド領域に jquery-1.7.1.js を導入します 3. <!-- code start -->><!-- code end --> コメントエリアコードを Web ページに追加します。

    画像の特殊効果27492017-03-11
  • CSS3円形画像のマウス回転効果

    CSS3 の円形画像は、マウスの後に回転効果があります。画像には短いタイトルと説明があります。主流のブラウザと互換性があります。PHP 中国語 Web サイトのダウンロードをお勧めします。 説明書:### 1. スタイルシートファイル lrtk.css をヘッド領域に導入します 2. <!-- code start --><!-- code end --> コメントエリアコードを Web ページに追加します 3. より良い結果を得るには、画像は幅と高さが 220 ピクセルを超える正方形で、一定の余白がある必要があります。

    画像の特殊効果14412017-03-11
  • jQuery画像リストアニメーション表示効果

    jQuery 画像リストのアニメーション表示効果, 画像の上にマウスを移動するとテキストの説明がポップアップします. 素材の画像リストや Web サイトのテンプレート テーマの作成に非常に適しています. 主流のブラウザと互換性があります. PHP 中国語 Web サイトのダウンロードをお勧めします! 説明書:### 1. スタイルシートファイル lrtk.css をヘッド領域に導入します 2. jquery.1.4.2.min.js と lrtk.js をヘッド領域に導入します 3. <!-- code start --><!-- code end --> コメントエリアコードを Web ページに追加し、リンクと画像を変更します。

    画像の特殊効果16472017-03-11
  • グリッド画像アコーディオン jquery 特殊効果コード

    グリッド イメージ アコーディオン jquery 特殊効果コードは、グリッド アコーディオン サムネイルとアコーディオン パネルの機能を組み合わせて、画像 Web サイトを興味深い方法で表示します。 XML または HTML の使用を選択できます。強力な API により、この jQuery プラグインの機能がさらに強化され、独自のアプリケーションに簡単に統合できます。主流のブラウザと互換性があるため、PHP 中国語 Web サイトからダウンロードすることをお勧めします。 説明書:### 1. スタイルシートファイルstyle.cssとgrid-accordion.cssをヘッド領域に導入します。 2. jquery-1.7.1.min.js と jquery.gridAccordion.min.js をヘッド領域に導入します 3. アコーディオン画像構成 js コード を上部に追加します。 4. Web ページに <!-- コード開始 --><!-- コード終了 -->市外局番をコメント化します。 5. 外部入力を使用してアコーディオンのサムネイルを制御できるパブリック メソッド (openpanel(3)、nextpanel()、previouspanel()、getpanelat(2) など)

    画像の特殊効果21682017-03-11
  • jqzoomは京東製品詳細ページの製品写真の拡大鏡効果を実現します

    jqzoomは京東製品詳細ページの製品写真の虫眼鏡効果を実装しています.商品を拡大してより鮮明に見るためにショッピングモールのWebサイトでよく使用されています.PHP中国語Webサイトのダウンロードをお勧めします!

    画像の特殊効果19902017-02-06