欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

 

<body>
 <div class="container demo">
  <div class="big">
   <p class="instructions">大圖預(yù)覽</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>

先總結(jié)一下：

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

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

如何讓左邊選擇區(qū)域的圖像信息和右邊的同步顯示出來？

一、右邊顯示和左邊同步：

　　左邊選擇一塊區(qū)域，那么右邊要和這個(gè)區(qū)域的圖像信息相同？其實(shí)質(zhì)，也就是要移動(dòng)右邊的圖像，讓移動(dòng)后的右邊圖片，在顯示區(qū)域當(dāng)中，顯示的圖像信息，正好和左邊的選擇區(qū)域一樣。

二、如何移動(dòng)右邊圖像

　　要移動(dòng)圖片，也就是移動(dòng)一個(gè)元素，可以有改變TOP LEFT值，這是在有絕對或相對定位的情況下。而這里，沒有。

　　所以用到改變margin-top margin-left值的方式。

三、移動(dòng)公式

上圖中：黑色：圖片，白色：選擇區(qū)，紅色：起始點(diǎn)，綠色：起始點(diǎn)的橫縱坐標(biāo)值； 黃色為:右邊圖片的margin-top,margin-left

假設(shè)：左邊圖片和右邊圖片，一樣大小，寬和高都一樣。我要在右邊顯示出左邊白色區(qū)域的圖像信息，就需要把右邊圖片的

margin-top值設(shè)為：紅點(diǎn)的Y坐標(biāo)值

margin-left值設(shè)為：紅點(diǎn)的X坐標(biāo)值

即：

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

但是現(xiàn)在假設(shè)不成立，因?yàn)橛疫厛D片的大小，是隨時(shí)變化的（第一篇分析中有）;

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

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

都應(yīng)該乘以這個(gè)放大或縮小的比例值：

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

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

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

相關(guān)文章

最新評論