此项目基于base.js 框架:

当鼠标放在图片上,并点击后的一个效果,
<html>
<head>
<meta charset="utf-8">
<title>点击图片放大</title>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/dragImgChange.js"></script>
<style type="text/css">
body,ul,li,img{margin:0px;padding:0px;}
#img1{position: absolute;top:100px; left:100px;width:400px;height:400px;}
</style>
<script type="text/javascript">
window.onload=function(){
var img=document.getElementById("img1");
img.onclick=function(){
startMove(img,{"width":500,"height":500,"marginLeft":-50,"marginTop":-50},"jiasu");
}
}
</script>
</head>
<body>
<img src="images/1.jpg" id="img1">
</body>
</html>点击图片方法,这里使用了startMove这个方法, 运动的方式有两种 buffer 和 jiasu 这两种方式,到时候可以根据自己的需求去填写。