https://www.ecupl.edu.cn/_upload/tpl/02/16/534/template534/js/dragmove.js

1function DragScale (bar, ele, params) {
2    this.bar = bar
3    this.ele = ele
4    this.params = params || {
5		zoomVal: 1, // 初始缩放比例
6		minZoomVal: 0.2, // 最小缩放比例
7		left: 0, // 初始左边距
8		top: 0, // 初始上边距
9		currentX: 0, // 鼠标X坐标
10		currentY: 0, // 鼠标Y坐标
11		moveVal: 50, // 上下左右移动距离
12		wheelVal: 1200, // 滚轮放大缩小的值
13        clickVal:0.1,// 鼠标放大缩小的值
14		flag: false
15	}
16}
17DragScale.prototype.scale = function(mark) {
18    if(mark==0){
19        var wheelVal = [event.wheelDelta, this.params.wheelVal, -this.params.wheelVal][mark] 
20        this.params.zoomVal += wheelVal / 1200
21        if (this.params.zoomVal < this.params.minZoomVal) {this.params.zoomVal = this.params.minZoomVal}
22        this.ele.css("transform", "scale(" + this.params.zoomVal + ")")
23        var minus=parseInt((this.params.zoomVal-1)*100+50)  
24        $(".main7 .dragfh .ball").css("top",(100-minus)+"%")
25    }else{
26        var wheelVal = [event.wheelDelta, this.params.clickVal, -this.params.clickVal][mark]
27        this.params.zoomVal += wheelVal
28        this.ele.css("transform", "scale(" + this.params.zoomVal + ")")
29    }
30     
31}
32DragScale.prototype.getCss = function(key) {
33    return this.ele.css(key);
34}
35DragScale.prototype.drag = function(callback) {
36    var _that = this
37    if (this.getCss("left") !== "auto") {
38        this.params.left = this.getCss("left")
39    }
40    if (this.getCss("top") !== "auto") {
41        this.params.top = this.getCss("top")
42    }
43    // o是移动对象
44    this.bar.on("mousedown", function (event) {
45        _that.params.flag = true;
46        if (!event) {
47            event = window.event;
48            //防止IE文字选中
49            _that.bar.onselectstart = function () {
50                return false;
51            }
52        }
53        var e = event;
54        _that.params.currentX = e.clientX;
55        _that.params.currentY = e.clientY;
56    });
57 
58 
59
60    document.onmouseup = function () {
61        _that.params.flag = false;
62        if (_that.getCss("left") !== "auto") {
63            _that.params.left = _that.getCss("left");
64        }
65        if (_that.getCss("top") !== "auto") {
66            _that.params.top = _that.getCss("top");
67        }
68    };
69    document.onmousemove = function (event) {
70        var e = event ? event : window.event;
71        if (_that.params.flag) {
72            var nowX = e.clientX;
73            var nowY = e.clientY;
74            var disX = nowX - _that.params.currentX;
75            var disY = nowY - _that.params.currentY;
76            _that.ele.css("left", parseInt(_that.params.left) + disX + "px");
77            _that.ele.css("top", parseInt(_that.params.top) + disY + "px");
78            if (typeof callback == "function") {
79                callback((parseInt(_that.params.left) || 0) + disX, (parseInt(_that.params.top) || 0) + disY);
80            }
81            if (event.preventDefault) {
82                event.preventDefault();
83            }
84            return false;
85        }
86    }
87}
88DragScale.prototype.moveUp = function() {
89    this.ele.css("top", parseInt(this.params.top) - this.params.moveVal + "px");
90    this.params.top = parseInt(this.params.top) - this.params.moveVal
91}
92DragScale.prototype.moveDown = function() {
93    this.ele.css("top", parseInt(this.params.top) + this.params.moveVal + "px");
94    this.params.top = parseInt(this.params.top) + this.params.moveVal
95}
96DragScale.prototype.moveLeft = function() {
97    this.ele.css("left", parseInt(this.params.left) - this.params.moveVal + "px");
98    this.params.left = parseInt(this.params.left) - this.params.moveVal
99}
100DragScale.prototype.moveRight = function() {
101    this.ele.css("left", parseInt(this.params.left) + this.params.moveVal + "px");
102    this.params.left = parseInt(this.params.left) + this.params.moveVal
103}