利用JavaScript实现类似淘宝购物界面的选中图片放大功能
功能介绍:当鼠标移动到下方的缩略图后,在上方的框体内 放大显示此图像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function change(src){
var datu=document.getElementById("datu");
datu.src=src;
}
</script>
<style type="text/css">
#da{
border: 1px red solid;
width: 350px;
height:350px;
font-size: 50px;
margin-left: 65px;
}
.xiao{
float: left;
margin-left: 22px;
}
</style>
</head>
<body>
<div id="da">
<img src="img/上海吉祥混沌.jpg" id="datu" width="350px" />
</div>
<img src="img/上海吉祥混沌.jpg" onmouseover="change(this.src)" class="xiao" style="margin-left: 63px;" />
<img src="img/减负手作汉堡.jpg" onmouseover="change(this.src)" class="xiao" />
<img src="img/好味来酸辣粉冒菜.jpg" onmouseover="change(this.src)" class="xiao" />
<img src="img/沙县小吃.jpg" onmouseover="change(this.src)" class="xiao" />
</body>
</html>