div 内で画像を回転、拡大、縮小、ドラッグする方法

ヤオ ヤオ、チェケ ナオ、私は一人でコーディングするのにもうんざりですし、バグを山積みにして書くのもうんざりです。秋はさわやかで、空気は乾いています。もっと水を飲んでください。まだ数日あるので、好きなだけ私と話してください〜〜

。

新年です、長い間ブログを更新していませんでした、国慶節が近づいているのを見て、国慶節が終わったら旧正月を待つと聞きましたが、ちょうど終わったような気がします新年を迎え、とても悲しいので、Xiao Baiju の逝去に哀悼の意を表する投稿を投稿します...

開発中のこのようなシナリオでは、Web アプリケーションの特定の機能は、によってアップロードされた写真を受け取ります。実際の制作過程では、ユーザーがアップロードした写真が反転したり、アップロードされた写真が比較的ぼやけたりすることがあります。

1. 画像の角度の問題を解決します

一般原理は非常に簡単で、HTML要素オブジェクト(画像)のクラスを切り替えます。次の CSS コード:

.rot1 {
    transform:rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot2 {
    transform:rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot3 {
    transform:rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

次に、単純な JavaScript コードを追加します。左に回すか右に回すかに従ってクラスの名前を動的に変更するだけです。もう一度プロンプトを表示しますが、IE8 ブラウザーが使用されています

が効果がありません。 -ms-filter直接filterここでは CSS3+fi​​lter メソッドが使用されているため、次の式は Firefox の以前のバージョンと Opera ブラウザの現在のバージョンには影響しません。しかし、インターネット ユーザーの 90% 以上には間違いなく当てはまります。

2. 画像の拡大/縮小

とは、画像の幅と高さを調整することを意味します。以下のコアコード

  //放大缩小图片 function imgToSize(size) {
    var img = $("#rotImg");
    var oWidth = img.width();
    //取得图片的实际宽度 var oHeight = img.height();
    //取得图片的实际高度 img.width(oWidth + size);
    img.height(oHeight + size / oWidth * oHeight);
}

3.画像が親コンテナを越えて拡大される場合、条件下でmousemoveをバインドして、画像をコンテナ内にドラッグすることをサポートします。マウスダウンの実行とドラッグ領域のサイズの計算のコア コードは次のとおりです:

 $(document).bind('mousemove.imgview', function (event) {
    if ($img.data('mousedown')) {
    var dx = event.pageX - settings['pageX'];
    var dy = event.pageY - settings['pageY'];
    if ((dx == 0) && (dy == 0)) {
    return false;
}
var newX = parseInt($img.css('left')) + dx;
    if (newX > 0) newX = 0;
    if (newX < settings[&#39;width&#39;] - $img.width()) newX = settings[&#39;width&#39;] - $img.width() + 1;
    var newY = parseInt($img.css(&#39;top&#39;)) + dy;
    if (newY > 0) newY = 0;
    if (newY < settings[&#39;height&#39;] - $img.height()) newY = settings[&#39;height&#39;] - $img.height() + 1;
    if (settings[&#39;width&#39;] >= $img.width()) {
    newX = settings[&#39;width&#39;] / 2 - $img.width() / 2;
}
if (settings[&#39;height&#39;] >= $img.height()) {
    newY = settings[&#39;height&#39;] / 2 - $img.height() / 2;
}
$img.css(&#39;left&#39;, newX + &#39;px&#39;);
    $img.css(&#39;top&#39;, newY + &#39;px&#39;);
    settings[&#39;pageX&#39;] = event.pageX;
    settings[&#39;pageY&#39;] = event.pageY;
    $img.data(&#39;cannot_minimize&#39;, true);
}
return false;
}
);

4. 実行するには、下部にあるデモをダウンロードしてください

。

5. 最終的な効果は次の図のようになります:

以上がdiv 内で画像を回転、拡大、縮小、ドラッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。