コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > js_javascript スキルを使用して画像の回転を実現する 3 つの方法

js_javascript スキルを使用して画像の回転を実現する 3 つの方法

WBOY
リリース： 2016-05-16 16:53:04
オリジナル
2193 人が閲覧しました

1 jQueryRotate.js を使用します

代案例:

复制代 代以下:


















测试結果：chrome 下効果正常，回転转後 img オブジェクトは img オブジェクト；ie8 下効果正常，ただし回転後 img オブジェクトは下面オブジェクト，原因オブジェクト変化，若回転後仍按画像の回転後に他の操作を行わない場合、このメソッドを使用して画像オブジェクトを取得できます。これは、js エラーになる可能性があります。
代打代打次のように:


2 Microsoft が提供する Matrix オブジェクトを使用します

例代：
复制代代幣如下:

















テスト結果:chrome 下の効果は正常ですが、回転後の img オブジェクトは Canvas の通常のオブジェクトに変化しました。ie8 下の効果、回転後の img オブジェクトは img オブジェクトになりました。Matrix() パラメータが多すぎて、使用時間がかかります

3 Microsoft が提供する BasicImage オブジェクトを使用します

例のコード:

のコード 代码如下:













結果: chrome では回転できません。ie8 では効果は正常で、回転後も img オブジェクトは img オブジェクトのままです。 BasicImage() にはパラメータが 1 つだけあります。

これら 3 つのメソッドのコードを見ると、本質的には解決策であることがわかります。Chrome では Canvas オブジェクトを使用し、ie8 では VML または Matrix() または BasicImage() を使用します。最近コンポーネントを改修しました。これには画像の回転と拡大が含まれます。IE8 では jQueryRotate.js が新しいオブジェクトを生成するため、画像を拡大する前に画像を選択するときに特別な処理が必要です。最終的に、chrome と ie8 を別々に処理することが決定され、chrome で実装するには jQueryRotate が使用され、ie8 ではコードの単純さと読みやすさを確保するために BasicImage() が使用されました。
関連ラベル：
画像の回転
ソース：php.cn
前の記事：jQuery の div のドラッグ、div の移動、ポップアップ レイヤーの実装原則と example_jquery 次の記事：jQuery のテーブル アプリケーション example_jquery のトラバース
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
CSS グリッドの高さが期待したものと異なるという問題が発生しています。どのような間違いを犯している可能性がありますか? 私は現在 CSS グリッドを学習しており、このカードをグリッドに分割して作成するように依頼されました。作りたいグリッドの写真を添付し​​ます。実際には、これらすべてのカードが配置さ...
から 2024-04-06 12:52:14
0
1
339
顔認証端末 iVMS-4200 と基盤の接続に問題がある 顔認証端末 iVMS-4200 が mysql データベースに接続するとエラーが表示されます。 YouTubeから以下の動画を参考にしてみました。しかし、保存するとエラーが表示され...
から 2024-04-06 12:20:33
0
1
347
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
ブロック改行の後の要素を表示する 私は現在これを持っています：テキストの最後にアイコン div を置きたいのですが、それは「ブロック」であるため、機能させることができません。必要な出力: コード スニペット: *{...
から 2024-04-04 21:45:21
0
1
271
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート