亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）

 更新時間：2016年12月02日 14:44:16   作者：船長op  
本篇文章主要對jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）的使用做了簡要分析說明。需要的朋友來看下吧，希望對大家有所幫助

 

<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>

先總結一下：

　　最近練手，寫了一些小東西，都是網(wǎng)上已有的成熟的JQ或JS，但在練手的過程中，我發(fā)現(xiàn)，很多應用，其實最后，都是歸根到元素的寬高變化，位置變化，通過事件或算法，最后形成了效果或應用。

　　如果大家看到一些很炫的東西效果，其實都可以往寬高，位置，顯示隱藏，這些方面去分析。一步一步深入。是一點個人體會。好吧，進入正題。

如何讓左邊選擇區(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;

但是現(xiàn)在假設不成立，因為右邊圖片的大小，是隨時變化的（第一篇分析中有）;

而變化是根據(jù)一個比例值來的。

所以這里不管是圖片放大，還是縮小，原來

都應該乘以這個放大或縮小的比例值：

margin-top = scaleX*x;
margin-left = scaleX*Y;

好了，現(xiàn)在可以得到移動的位置值了。也就是說左邊和右邊可以同步顯示圖像信息了。

以上就是本文的全部內(nèi)容，希望對大家有所幫助，有興趣的朋友可以看下《利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪（放大縮?。?/a>，謝謝對腳本之家的支持！

相關文章

最新評論