<!DOCTYPE html>
<html>
<head>
<title>图片内部放大效果</title>
<meta charset="utf-8">
<style type="text/css">
#imgborder{ width: 200px;height: 160px;border: 3px solid #000; overflow: hidden;position: relative;padding: 0px;margin:0px;}
#firstimg{ position: absolute; animation: myan 3s;}
/*@keyframes myan {
from{width: 200px;}
to{width: 500px;}
}*/
</style>
</head>
<body>
<div id="imgborder">
<img src="dog.jpg" id="firstimg">
</div>
</body>
<script type="text/javascript">
var fimg = document.getElementById('firstimg');
var imgb = document.getElementById('imgborder');
var initial = 0;
fimg.onmouseover = function(){
// img设置宽度，高都会等比例变大
initial = fimg.width;
fimg.width=fimg.width*1.2;
// fimg.height=fimg.height*1.1;
// alert(imgb.clientWidth);
fimg.style.left=-(fimg.width-imgb.clientWidth)/2+"px";
fimg.style.top=-(fimg.height-imgb.clientHeight)/2+"px";
// alert(fimg.style.top);
}
fimg.onmouseout = function(){
fimg.width = initial;
fimg.style.left="0px";
fimg.style.top="0px";
}
</script>
</html>
