当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的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 代码
@import url("./test.less");
export default {
data() { </