コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery は画像のホバー効果を制御します (smartRollover.js)_jquery

jQuery は画像のホバー効果を制御します (smartRollover.js)_jquery

WBOY
リリース： 2016-05-16 17:55:00
オリジナル
1001 人が閲覧しました

js を使用して実装する利点は、Web サイトに画像のホバー効果が多数ある場合、それぞれを CSS で制御する必要があるため、コードが冗長になることです。ただし、JS コントロールを使用すると、画像の数に関係なく、ホバー効果で同じ JS を使用できますが、画像のアウト/オフ エフェクトとオーバー/オン エフェクトに次のような規則的な名前が付けられていることを確認する必要があります。
navi01_out.jpg/navi01_off. jpg
navi01_over.jpg/nvai02_on.jpg
このようにjsコントロールを使うととても便利です。一致する名前が見つかり、マウスを置くと別の名前に置き換えられます。

今日は jQuery を使用して効果を制御したいと思います:
コードは次のとおりです:

コードをコピーします コードは次のとおりです。



$img は、他の
のように指定できます。 $img = $("img.imgover") ; img クラスが imgover であるすべての画像を示します
その他は必要に応じてカスタマイズできます。ただし、写真には定期的に名前を付ける必要があります
関連ラベル：
hover
ソース：php.cn
前の記事：HTML_javascript スキルでの setCapture と releaseCapture の使用の概要 次の記事：ExtJs の使用法の概要 (非常に詳細)_extjs
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート