ヤオ ヤオ、チェケ ナオ、私は一人でコーディングするのにもうんざりですし、バグを山積みにして書くのもうんざりです。秋はさわやかで、空気は乾いています。もっと水を飲んでください。まだ数日あるので、好きなだけ私と話してください〜〜
。新年です、長い間ブログを更新していませんでした、国慶節が近づいているのを見て、国慶節が終わったら旧正月を待つと聞きましたが、ちょうど終わったような気がします新年を迎え、とても悲しいので、Xiao Baiju の逝去に哀悼の意を表する投稿を投稿します...
開発中のこのようなシナリオでは、Web アプリケーションの特定の機能は、によってアップロードされた写真を受け取ります。実際の制作過程では、ユーザーがアップロードした写真が反転したり、アップロードされた写真が比較的ぼやけたりすることがあります。
1. 画像の角度の問題を解決します
.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); }
が効果がありません。 -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('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['width'] - $img.width()) newX = settings['width'] - $img.width() + 1; var newY = parseInt($img.css('top')) + dy; if (newY > 0) newY = 0; if (newY < settings['height'] - $img.height()) newY = settings['height'] - $img.height() + 1; if (settings['width'] >= $img.width()) { newX = settings['width'] / 2 - $img.width() / 2; } if (settings['height'] >= $img.height()) { newY = settings['height'] / 2 - $img.height() / 2; } $img.css('left', newX + 'px'); $img.css('top', newY + 'px'); settings['pageX'] = event.pageX; settings['pageY'] = event.pageY; $img.data('cannot_minimize', true); } return false; } );
4. 実行するには、下部にあるデモをダウンロードしてください
以上がdiv 内で画像を回転、拡大、縮小、ドラッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。