用jq 可以轻松实现 下面的代码是 移位 +放大, 再次点击时的代码自己加
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
})
})
})
</script>
看看如下示例是否符合你的需求：
<!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。想要放大或者缩小到固定大小的话，直接传递数值即可的！
有任何疑问，欢迎追问......
这个代码只是修改了缩放元素的缩放比例，并没有设置基准点。基准点应该是这个元素的定位属性导致的吧，比如
img{position:absolutetop:0right:0}
也许是其中的定位导致了基准点在右上的效果
