基于Vue實現(xiàn)圖片在指定區(qū)域內(nèi)移動

番茄西紅柿發(fā)布于2019-04-23 13:12 / 1247人閱讀

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

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

此處需要注意的是

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

然后還需要禁用圖片的選中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云服務器云服務器基于騰訊云實現(xiàn)移動直播指定區(qū)域外打印指定區(qū)域 js打印指定區(qū)域

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1571.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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