Javascript 在div中移动缩放图像以查看其他部分

我实际上是在显示一个对象（摄影机提要）。 目标是缩放然后移动我的提要，就像我处理GMAP项目一样。 我试过GMAP ImageTiler，但它并没有像预期的那样工作。 然后我试着自己做，但我也有兴趣用另一种方式（更好/更干净的方式）来做我实际正在做的事情

$（“#videoContainer”）.css（'height'，480）；
$（“#videoContainer”）.css（'width'，640）；
$（'#videoContainer'）。在（'mousewheel'，函数（事件）上{
变量高度=$（“#流”）.height（）；
变量宽度=$（“#流”）.width（）；
如果（高度==480&&width==640&&event.deltaY>0）{
}否则{
如果（event.deltaY>0）{
高度/=2；
宽度/=2；
$（“#流”）.css（'height'，height）；
$（“#流”）.css（'width'，width）；
控制台。原木（高度、宽度）；
}
else if（event.deltaY<0）{
高度*=2；
宽度*=2；
$（“#流”）.css（'height'，height）；
$（“#流”）.css（'width'，width）；
控制台。原木（高度、宽度）；
}
}
});
这是我的问题解决方案。
有些事情必须纠正，但我们有缩放（捏或鼠标滚动）和拖动视频饲料

这是我的密码


$（“#videoContainer”）.css（'height'，$（'#stream'）.height（））；
$（“#videoContainer”）.css（'width'，$（'#stream'）.width（））；
$（'#videoContainer'）。在（'mousewheel'，函数（事件）上{
变量高度=$（“#流”）.height（）；
变量宽度=$（“#流”）.width（）；
如果（高度==480&&width==640&&event.deltaY>0）{
}否则{
如果（event.deltaY>0）{
高度/=2；
宽度/=2；
$（“#流”）.css（'height'，height）；
$（“#流”）.css（'width'，width）；
}
else if（event.deltaY<0）{
高度*=2；
宽度*=2；
$（“#流”）.css（'height'，height）；
$（“#流”）.css（'width'，width）；
}
}
});
功能启动图（e）{
如果（！e）{
var e=window.event；
}
var targ=e.target？e.target:e.src元素；
如果（target.className！=='dragme'）{
返回
}
offsetX=e.clientX；
offsetY=e.clientY；
如果（！target.style.left）{
target.style.left='0px'
}
如果（！target.style.top）{
target.style.top='0px'
}
coordX=parseInt（target.style.left）；
coordY=parseInt（target.style.top）；
阻力=真；
document.onmousemove=dragDiv；
返回false；
}
函数dragDiv（e）{
如果（！拖动）{
返回
}
如果（！e）{
var e=window.event
}
var targ=e.target？e.target:e.src元素；
//移动div元素
target.style.left=coordX+e.clientX-offsetX+'px'；
target.style.top=coordY+e.clientY-offsetY+px'；
返回false；
}
函数stopDrag（）{
阻力=假；
}
window.onload=函数（）{
document.onmousedown=startDrag；
document.onmouseup=停止拖动；
}
.dragme{
位置：相对位置；
宽度：270px；
高度：203px；
光标：移动；
}