Vue.js+jQuery.js实现图片的放大缩小及拖拽

1、编辑html<!--用下面一个DIV片段作为说明 --><!--div样式高、宽、边框样式可自行修改；mousedown事件是鼠标左键按下按住事件 --><div id="sfzGhImageDiv" @mousedown="mousedown('sfzGhImageDiv')" style="overflow: hidden; position: relative; width: 570px; height: 300px;border:1px solid #000;"><template slot-scope="scope"><!--img样式高、宽、边框样式可自行修改，需与div的大小一致；mousewheel是滚轮滚动事件，event参数可以传递滚轮滚动事件的一些参数（注意：好像火狐浏览器这个事件名） --><img id="sfzGhImage" @mousewheel="imgToSize(sfzGhImage,event)" :src=OCRModel.OCRSfzURL_ZM alt="身份证正面图片（国徽面）" style="cursor: move; visibility: visible; position: absolute; width: 570px; height: 300px;"></template></div>

2、引入JS<!-- 引入以下的jQuery相关的JS，为了OCR图片放大缩小鼠标拖动功能 --><script src="../js/jquery/jquery-1.10.2.js"></script><script src="../js/jquery/jquery.imageView.js"></script><script src="../js/jquery/jquery-browser.js"></script>

3、在Vue的methods标签内写function方法//OCR图片放大缩小功能(所有图片div通用，通过jQuery的id绑定操作)"imgToSize" : function(imgId,event) { //通过这个值与零的大小比较，可以知道鼠标的滚轮滚动的方向 var deltaY = event.deltaY; var size = 0; if(deltaY > 0){ size = -100; }else if(deltaY < 0){ size = 100; } var img = $("#"+imgId.id); //取得图片的实际宽度 var oWidth = img.width(); //取得图片的实际高度 var oHeight = img.height(); //赋予改变后的值 img.width(oWidth + size); img.height(oHeight + size / oWidth * oHeight); }, //鼠标左键按下，拖动照片事件(所有图片div通用，通过jQuery的id绑定操作)"mousedown" : function(id){ //width: 570, height: 300,需与div的大小一致 $("#"+id).imageView({ width: 570, height: 300 }); }

4、在这过程中，还遇到一个问题：就是当需要显示图片很多，按顺序排下来远远超过了屏幕的宽度，当你想对某一张图片鼠标滚轮放大缩小操作的时候，整个页面也会跟着上下动，好烦人，怎么办呢？把鼠标的光标放在图片上，按住shift键，再滑动鼠标，你会发现，页面不动了，只是光标下方的图片在被放大、缩小！哈哈！