利用jQuery插件imgAreaSelect實現圖片上傳裁剪（同步顯示圖像位置信息）
<body>
<div class="container demo">
<div class="big">
<p class="instructions">大圖預覽</p>
<div class="bigframe">
<img width="300" height="300" src="images/resized_pic.jpg" alt="" />
</div>
</div>
<div class="small">
<p>小圖縮放</p>
<div class="smallframe" >
<div class="pre" id="preview">
<img src="images/resized_pic.jpg" alt="" />
</div>
</div>
</div>
</div>
</body>
先總結一下：
最近練手，寫了一些小東西，都是網上已有的成熟的JQ或JS，但在練手的過程中，我發(fā)現，很多應用，其實最后，都是歸根到元素的寬高變化，位置變化，通過事件或算法，最后形成了效果或應用。
如果大家看到一些很炫的東西效果，其實都可以往寬高，位置，顯示隱藏，這些方面去分析。一步一步深入。是一點個人體會。好吧，進入正題。
如何讓左邊選擇區(qū)域的圖像信息和右邊的同步顯示出來？
一、右邊顯示和左邊同步：
左邊選擇一塊區(qū)域，那么右邊要和這個區(qū)域的圖像信息相同？其實質，也就是要移動右邊的圖像，讓移動后的右邊圖片，在顯示區(qū)域當中，顯示的圖像信息，正好和左邊的選擇區(qū)域一樣。
二、如何移動右邊圖像
要移動圖片，也就是移動一個元素，可以有改變TOP LEFT值，這是在有絕對或相對定位的情況下。而這里，沒有。
所以用到改變margin-top margin-left值的方式。
三、移動公式
上圖中：黑色：圖片，白色：選擇區(qū)，紅色：起始點，綠色：起始點的橫縱坐標值； 黃色為:右邊圖片的margin-top,margin-left
假設：左邊圖片和右邊圖片，一樣大小，寬和高都一樣。我要在右邊顯示出左邊白色區(qū)域的圖像信息，就需要把右邊圖片的
margin-top值設為：紅點的Y坐標值
margin-left值設為：紅點的X坐標值
即：
margin-top = x; margin-left = Y;
但是現在假設不成立，因為右邊圖片的大小，是隨時變化的（第一篇分析中有）;
而變化是根據一個比例值來的。
所以這里不管是圖片放大，還是縮小，原來
都應該乘以這個放大或縮小的比例值：
margin-top = scaleX*x; margin-left = scaleX*Y;
好了，現在可以得到移動的位置值了。也就是說左邊和右邊可以同步顯示圖像信息了。
以上就是本文的全部內容，希望對大家有所幫助，有興趣的朋友可以看下《利用jQuery插件imgAreaSelect實現圖片上傳裁剪（放大縮小）》，謝謝對腳本之家的支持！
相關文章
這篇文章主要為大家詳細介紹了jquery zTree異步加載、模糊搜索簡單實例，感興趣的小伙伴們可以參考一下2016-03-03
本文主要分享了jquery實現數字輸入框的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點和相同點，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了jQuery三級下拉列表導航菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
jQuery ajax在GBK編碼下表單提交終極解決方案(非二次編碼方法)
當jquery ajax在utf-8編碼下（頁面utf－8，接收utf-8），無任何問題。可以正常post、get，處理頁面直接獲取正確的內容。2010-10-10
下面小編就為大家?guī)硪黄猨query之基本選擇器practice(實例講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
我們今天要做的是手風琴panel，jquery.ui里面有個叫做accordtion的插件，我們要實現的效果和他一樣2012-08-08
本文介紹了一款jQuery實現的文字自動補全特效的插件，該插件可以結合本地數據進行一些操作。推薦關注一下H5的幾種數據存儲的方式（localstorage與sessionstorage、IndexedDB、離線緩存manifest文件）2014-11-11
這篇文章主要介紹了單擊和雙擊事件的沖突處理方法,需要的朋友可以參考下2014-04-04
Jquery EasyUI實現treegrid上顯示checkbox并取選定值的方法
這篇文章主要介紹了Jquery EasyUI實現treegrid上顯示checkbox并取選定值的方法的相關資料,需要的朋友可以參考下2016-04-04