當(dāng)圖片比要顯示的區(qū)域大時，需要將多余的部分隱藏掉，我們可以通過絕對定位來實(shí)現(xiàn)，并通過動態(tài)修改圖片的left值和top值從而實(shí)現(xiàn)圖片的移動。具體實(shí)現(xiàn)效果如下圖，如果我們移動的是div 實(shí)現(xiàn)思路相仿。
在巴中等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷,外貿(mào)網(wǎng)站制作,巴中網(wǎng)站建設(shè)費(fèi)用合理。
此處需要注意的是
我們在移動圖片時，需要通過draggable="false" 將圖片的 否則按下鼠標(biāo)監(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%;
}
}
}
}
} 總結(jié)
以上所述是小編給大家介紹的基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動的思路詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
