div 内で画像を回転、拡大、縮小、ドラッグする方法-CSSチュートリアル-php.cn

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

一个新手

リリース： 2017-10-06 10:41:18

オリジナル

3675 人が閲覧しました

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

。

新年です、長い間ブログを更新していませんでした、国慶節が近づいているのを見て、国慶節が終わったら旧正月を待つと聞きましたが、ちょうど終わったような気がします新年を迎え、とても悲しいので、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+filter メソッドが使用されているため、次の式は 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(&#39;mousemove.imgview&#39;, function (event) {
    if ($img.data(&#39;mousedown&#39;)) {
    var dx = event.pageX - settings[&#39;pageX&#39;];
    var dy = event.pageY - settings[&#39;pageY&#39;];
    if ((dx == 0) && (dy == 0)) {
    return false;
}
var newX = parseInt($img.css(&#39;left&#39;)) + 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. 実行するには、下部にあるデモをダウンロードしてください

。

Title