如何在div內部實現圖片旋轉、放大、縮小、拖曳-css教學-PHP中文網

如何在div內部實現圖片旋轉、放大、縮小、拖曳

一个新手

發布： 2017-10-06 10:41:18

原創

3674 人瀏覽過

藥藥，切克鬧，一人我編碼累，累把那bug寫成堆。秋高氣爽空氣乾燥你一定dei多喝水，過完了這週我就要回去、趁還有幾天、你盡情的來跟我懟~~~

新的一年，很久沒更博客了，眼看十一要來了，聽說了十一就等過年了，但是感覺剛過完年一樣，心裡黯然神傷，更博一篇以表對小白駒過隙之神速聊以慰藉下…

在開發中這樣一個場景，web應用程式某處功能會接收來自各個戶上傳的圖片，後台有個圖片查看功能，實際生產過程中的結果出現了用戶上傳的圖片是倒轉的或是圖片因為遠距離拍攝上傳的比較模糊的情況。

1、解決圖片角度的問題

大概原理很簡單，切換HTML元素物件（圖）的class。如下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程式碼－根據是向左轉還是向右轉動態改變class的名稱就行了。再次提示下，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、區域內拖曳圖片

##圖片放大超過父級容器時，支援圖片在容器內拖曳，在mousedown的條件下綁定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、綜合功能實作程式碼如下，執行請底部下載demo

Title