1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div id=allbox> <div id=boxhome> <img style="WIDTH: 107pxBOTTOM: 5pxHEIGHT: 176pxLEFT: 10px" id=imgSmallLeft class=imgBorder onClick="clearInterval(autoplay)moveD('l')"> 。
4、书写并添加js代码。<script src="js/ntes_jslib_1.x.js"></script<script src="js/zzsc.js"></script>。
5、代码整体结构。
6、查看效果。
看看如下示例是否符合你的需求：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
</head>
<style type="text/css">
div{width: 30pxheight: 100pxborder: 1px solid #cccbackground: #999}
</style>
<body>
<div onmousewheel="bsadapt(this)"></div>
</body>
<script type="text/javascript">
function bsadapt(o){
var zoom = parseInt(o.style.zoom, 10)||100
zoom += event.wheelDelta/12
if(zoom > 0){
o.style.zoom = zoom+'%'
}
return false
}
</script>
</html>
鼠标移动到区域，然后滚动滚动，可以放大、缩小div。想要放大或者缩小到固定大小的话，直接传递数值即可的！
有任何疑问，欢迎追问......
three.js包含了很多相机控制器，通过旋转相机可以达到同样的旋转效果。但是当我们需要固定场景背景，固定固定摄像机的时候。我们只能去移动物体了。Three.js提供了
TransformControls.js控件，它可以控制物体的旋转、缩放、平移，但是使用起来并不方便。
这个时候就需要自己动手写控制器了。
原理很简单：获取鼠标（手势）点击的位置，以及鼠标拖动的距离。
把移动的方向和距离作为参数传递给物体。然后在循环中改变物体的属性来控制物体。
将要转动的物体放在一个组中，改变该组就可以。
这里获取的是X轴方向的鼠标移动的值。然后绕Y轴旋转。也可以添加其他的方向的旋转事件。
也可以添加一个功能，点击立方体之上才有效果。再说吧。
