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

最後更新：2017-10-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

藥藥，切克鬧，一人我編碼累，累把那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('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、綜合功能實現代碼如下，運行請底部下載demo

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .rot1 {    -moz-transform: rotate(90deg);    -webkit-transform: rotate(90deg);    transform: rotate(90deg);    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}.rot2 {    -moz-transform: rotate(180deg);    -webkit-transform: rotate(180deg);    transform: rotate(180deg);    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}.rot3 {    -moz-transform: rotate(270deg);    -webkit-transform: rotate(270deg);    transform: rotate(270deg);    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}#imageView_container {    border: 2px solid #000000;}</style> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-browser.js"></script> <script src="js/jquery.imageView.js"></script></head><body><p id="imageView_container" style="overflow: hidden;    position: relative;    width: 800px;    height: 500px;    "> <img src="images/1.jpg" id="rotImg" style="cursor: move;    visibility: visible;    position: absolute;    width: 800px;    height: 500px;    " /></p><p style="padding-top:5px;    "> <input type="button" value="放大" onclick="imgToSize(100)"> <input type="button" value="縮小" onclick="imgToSize(-100);    "> <input type="button" value="向右旋轉" id="rotRight"> <input type="button" value="向左旋轉" id="rotLeft"></p><script type="text/javascript"> $(function () {    var param = {    right: document.getElementById("rotRight"), left: document.getElementById("rotLeft"), img: document.getElementById("rotImg"), rot: 0};    var fun = {    right: function () {    param.rot += 1;    param.img.className = "rot" + param.rot;    if (param.rot === 3) {    param.rot = -1;}}, left: function () {    param.rot -= 1;    if (param.rot === -1) {    param.rot = 3;}param.img.className = "rot" + param.rot;}};    param.right.onclick = function () {    fun.right();    return false;};    param.left.onclick = function () {    fun.left();    return false;};    $('#imageView_container').imageView( {    width: 800, height: 500});});    var size = 0;    //放大縮小圖片 function imgToSize(size) {    var img = $("#rotImg");    var oWidth = img.width();    //取得圖片的實際寬度 var oHeight = img.height();    //取得圖片的實際高度 img.width(oWidth + size);    img.height(oHeight + size / oWidth * oHeight);}</script></body></html>

5、最終效果如所示：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More