效果图：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
控制图片屏幕中间显示放大效果
</title>
<script type="text/javascript">
function imgmouseover(id){
var a=document.getElementById(id);
var b=document.getElementById("img000");
switch(id){
case "img01":
a.src="img/101.png";
b.src="img/101.png";
break;
case "img02":
a.src="img/102.png";
b.src="img/102.png";
break;
case "img03":
a.src="img/103.png";
b.src="img/103.png";
break;
}
}
function imgmouseout(id){
var a=document.getElementById(id);
var b=document.getElementById("img000");
switch(id){
case "img01":
a.src="img/1011.png";
break;
case "img02":
a.src="img/1012.png";
break;
case "img03":
a.src="img/1013.png";
break;
}
}
</script>
</head>
<body>
<div style="padding-left: 360px;">
<img id="img01" src="img/1011.png" onmouseover="imgmouseover('img01')" onmouseout="imgmouseout('img01')">
<img id="img02" src="img/1012.png" onmouseover="imgmouseover('img02')" onmouseout="imgmouseout('img02')">
<img id="img03" src="img/1013.png" onmouseover="imgmouseover('img03')" onmouseout="imgmouseout('img03')">
</div>
<div>
<img id="img000" src="img/1012.png" style="width:800px;height: 600px;padding-left:520px;padding-top: 50px;">
</div>
</body>
</html>