基于Vue實現圖片在指定區域內移動

番茄西紅柿發布于2019-04-23 13:12 / 1238人閱讀

摘要：當圖片比要顯示的區域大時，需要將多余的部分隱藏掉，我們可以通過絕對定位來實現，并通過動態修改圖片的值和值從而實現圖片的移動。具體實現效果如下圖，如果我們移動的是實現思路相仿。

當圖片比要顯示的區域大時，需要將多余的部分隱藏掉，我們可以通過絕對定位來實現，并通過動態修改圖片的left值和top值從而實現圖片的移動。具體實現效果如下圖，如果我們移動的是div 實現思路相仿。

此處需要注意的是

我們在移動圖片時，需要通過draggable="false" 將圖片的，否則按下鼠標監聽onmousemove事件時監聽不到

然后還需要禁用圖片的選中css

/*禁止元素選中*/
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;

Vue 代碼

樣式表

.page {
  background: #444;
  width: 100%;
  height: 100%;
  position: relative;
  .image-move-wapper {
    position: absolute;
    right: 50px;
    top: 50px;
    background: #fff;
    box-shadow: rgba(255, 255, 255, 0.5);
    padding: 10px;
  }
  .image-show-box {
    height: 400px;
    width: 400px;
    cursor: move;
    overflow: hidden;
    position: relative;
    .drag-container {
      position: absolute;
      left: 0px;
      top: 0;
      /*禁止元素選中*/
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit瀏覽器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期瀏覽器*/
      user-select: none;
      .drag-image-box {
        position: relative;
        .point {
          position: absolute;
          background: red;
          height: 30px;
          width: 30px;
          border-radius: 50%;
        }
      }
    }
  }
}

原文地址：http://jiojun.com/Article/Detail?articleId=17

云服務器 GPU云服務器基于騰訊云實現移動直播指定區域外打印指定區域 js打印指定區域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1571.html

vue-avatar-tailor，vue頭像裁剪組件

摘要：實現原理簡單，純技術處理圖片，幾乎不需要用到相關知識面向人群急于使用頭像裁剪組件的同學。裁剪框初始寬高上傳圖片后，裁剪區將預設為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續優化。項目簡介本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無需安裝依賴使用九宮格進行裁剪，自由選擇裁剪區域。實時預覽裁剪后效果。可以將裁剪好的圖片，...

imccl 2019-08-23 12:13 評論0 收藏0
CSS background系列屬性

摘要：通過該屬性可以控制繪制的區域。背景圖片相關的屬性背景圖片本身是有自身尺寸的，被應用元素也有自己的尺寸。通過屬性可以修改原點位置。坐標系的反方向都是重復方式繪制。該位置是相對于原點構建的坐標系，默認情況下該位置就是在原點。一、元素背景是指哪些區域默認情況下元素的背景是指元素border（包含border）以內的區域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 評論0 收藏0
Vue仿餓了么app項目總結

摘要：前言這是我第一個基于的項目作品，目的很簡單，學以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現出來。即將屬性和請求返回數據對象合并到空對象，然后賦值給這里加上即提供了一種可擴展的機制，倘若原來的屬性中有預定義的其他屬性。前言這是我第一個基于 Vue 的項目作品，目的很簡單，學以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現出來。源代碼：ht...

FrozenMap 2019-08-26 11:47 評論0 收藏0
面試官(6): 寫過『通用前端組件』嗎?

摘要：很久沒上掘金發現草稿箱里存了好幾篇沒發的文章最近梳理下發出來往期面試官系列如何實現深克隆面試官系列的實現面試官系列前端路由的實現面試官系列基于數據劫持的雙向綁定優勢所在面試官系列你為什么使用前端框架前言設計前端組件是最能考驗開發者基本功的測很久沒上掘金,發現草稿箱里存了好幾篇沒發的文章,最近梳理下發出來往期面試官系列(1): 如何實現深克隆面試官系列(2): Event Bus...

waltr 2019-05-27 17:43 評論0 收藏0
干貨--手把手擼vue移動UI框架：滑動加載

摘要：前言在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現相當復雜就覺得這個組件很難，其實不是的這個組件其實可以很簡單的就實現出來，而且體驗也能非常的棒當然我們沒有實現下拉刷新功能下面我們就一起來實現這個組件。前言在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現相當復雜就覺得這個組件很難，其實不是的！！這個組件其實可...

Harpsichord1207 2019-08-22 15:17 評論0 收藏0