html5 鼠标放在下面的图片时，会放大到中间就像图片呢样。求代码 在html中怎么用js实现鼠标指向图片时图片放大的效果？（具...
html5 \u9f20\u6807\u653e\u5728\u4e0b\u9762\u7684\u56fe\u7247\u65f6\u4f1a\u653e\u5927\u663e\u793a\u56fe\u7247\u3002\u5c31\u50cf\u56fe\u7247\u5462\u4e2a\u6548\u679c\u5462\u6837 \u9700\u8981\u600e\u4e48\u505a\u3002 Document img { width: 200px; height: 200px; } div img { width: 50px; height: 50px; margin: 30px; } let arr = [ "http://iconfont.alicdn.com/t/1551939248493.jpeg@100h_100w.jpg", "http://iconfont.alicdn.com/t/1550728574104.jpg@100h_100w.jpg", "http://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg" ]; arr.forEach((item, index) => { if (!index) { document.querySelector("#big").setAttribute("src", item); } let img = document.createElement("img"); img.setAttribute("src", item); document.querySelector("div").appendChild(img); }) document.querySelectorAll("div img").forEach(item => { item.onmouseover = () => { document.querySelector("#big").setAttribute("src", item.getAttribute("src")); } }) \u8bf7\u91c7\u7eb3
\u5206\u522b\u5199\u4e00\u4e2aonmouseover\u548conmouseout\u4e8b\u4ef6\u3002\u7136\u540e\u5728\u4e8b\u4ef6\u91cc\u9762\u52a0\u4e00\u4e2afunction\uff0c\u5206\u522b\u5199\u60f3\u8981\u653e\u5927\u7684\u5c3a\u5bf8\u548c\u7f29\u5c0f\u6216\u590d\u539f\u7684\u5c3a\u5bf8\u3002
\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\u5982\u4e0b\uff1a
var img = document.getElementById('img');
function bigger(){ img.style.width = '400px'; img.style.height = '400px'; }
function smaller(){ img.style.width = '100px'; img.style.height = '100px'; }
\u6269\u5c55\u8d44\u6599\uff1a
HTML 4.0 \u7684\u65b0\u7279\u6027\u4e4b\u4e00\u662f\u6709\u80fd\u529b\u4f7f HTML \u4e8b\u4ef6\u89e6\u53d1\u6d4f\u89c8\u5668\u4e2d\u7684\u52a8\u4f5c\uff08action\uff09\uff0c\u6bd4\u5982\u5f53\u7528\u6237\u70b9\u51fb\u67d0\u4e2a HTML \u5143\u7d20\u65f6\u542f\u52a8\u4e00\u6bb5 JavaScript\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u5c5e\u6027\u5217\u8868\uff0c\u8fd9\u4e9b\u5c5e\u6027\u53ef\u63d2\u5165 HTML \u6807\u7b7e\u6765\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u3002
\u53c2\u8003\u8d44\u6599\uff1a
JavaScript\u5b98\u65b9API\u63a5\u53e3-GlobalEventHandlers.onmouseover
JavaScript\u5b98\u65b9API\u63a5\u53e3-GlobalEventHandlers.onmouseout
W3cSchool-JavaScript \u4e8b\u4ef6\u53c2\u8003\u624b\u518c
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.hbody{
margin-left: 25%;
}
.show{
margin-left: 160px;
width: 200px;
height: 200px;
border: 1px solid #EEEEEE;
}
.show img{
width: 200px;
height: 200px;
}
.tab{
border: 1px solid #eee;
width: 535px;
height:100px ;
}
.tab img{
border: 1px solid #eee;
width: 100px;
height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="hbody">
<div class="show">
<img />
</div>
<div class="tab">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</div>
</body>
<script>
$(function(){
var Src = $('.tab').find('img').eq(0).attr('src');
$('.show').find('img').attr('src',Src)
})
$('.tab').find('img').mouseover(function(){
var inx = $(this).index();
var Imgsrc = $('.tab').find('img').eq(inx).attr('src');
$('.show').find('img').attr('src',Imgsrc)
})
</script>
</html>
引一个jquery文件，图片地址替换一下就可以了
答，要请专业的人才能够知道。
扩展阅读：html5鼠标经过图片放大 ... html鼠标悬停事件hover ... 罗技g502鼠标键位图 ... html鼠标悬停文字变色 ... html鼠标悬停显示大图 ... 鼠标各个按键图解 ... 鼠标指针各种形状图 ... html鼠标悬停显示div ... dw中html鼠标经过文字变色 ...
