JavaScript实现网页的放大缩小以及拖动功能

项目中遇到一种情况，开发的页面绘制出来的图片或者底图都比较大，超过屏幕大小许多。为了改善使用体验，需要给这类页面添加放大、缩小以及平移的功能。经过一番搜索和尝试，实现了有关功能，备忘如下。
JavaScript：
var zoomRate = 20;//每次放缩比例增量
var maxRate = 300;//最大放大倍数
var minRate = 20;//最小缩小倍数
var currZoom = 100;//当前缩放比
var dvWidth = 200;//构造缩放toolbar的宽度
var dvHeight = 30;///构造缩放toolbar的高度
var cname = '';
//--------------cookie--------------------------//
//将以前选择的zoom存入cookie//
function SetCookie(name, value) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + 30)
document.cookie = name + "=" + escape(value) + ";expires=" + exdate.toGMTString();
// document.cookie = name + "=" + escape(value) + ";";
}
function GetCookie(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=")
if (start != -1) {
start = start + name.length + 1
var end = document.cookie.indexOf(";", start)
if (end == -1) end = document.cookie.length
return unescape(document.cookie.substring(start, end))
}
}
return ""
}
//---------------------Zoom------------------------//
function Zoom() {
//在已有的页面动态加载div，用来放入功能控件
var dv = document.createElement('div');
dv.setAttribute('id', 'btnDiv');
dv.style.position = "absolute";
dv.style.display = "block";
dv.style.left = 0;
dv.style.top = 0;
dv.style.width = dvWidth;
dv.style.height = dvHeight;
dv.style.border = "2px inset gray";
dv.style.backgroundColor = "transparent";
dv.innerHTML = "ButtonArea";
document.body.appendChild(dv);
//添加功能控件
var select = '<select id="showZoom" onchange="changeZoom();"><option value="20%">20%</option><option value="40%">40%</option><option value="60%">60%</option><option value="80%">80