js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽

JavaScript026

js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽,第1张

<div class="upload-img-box" ref="moveWrap">

<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">

<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>

</div>

<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>

<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>

<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>

</div>

问题原理：百度地图的缩放是基于body层的，如果body层有滚动条，并且不在最顶端，在当前位置插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。

解决办法：当地图加载的时候执行

$(window).scrollTop(0)

也就是将父元素滚动到页面最顶端