此项目基于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 这两种方式,到时候可以根据自己的需求去填写。