Vue.js
jQuery.js
jQuery-browser.js
jQuery.imageView.js
编辑html
引入JS
在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 }); }
在这过程中，还遇到一个问题：就是当需要显示图片很多，按顺序排下来远远超过了屏幕的宽度，当你想对某一张图片鼠标滚轮放大缩小操作的时候，整个页面也会跟着上下动，好烦人，怎么办呢？把鼠标的光标放在图片上，按住shift键，再滑动鼠标，你会发现，页面不动了，只是光标下方的图片在被放大、缩小！哈哈！