html5 鼠标放在下面的图片时会放大显示图片。就像图片呢个效果呢样 需要怎么做。 30
3个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 200px;
喊陵颤 郑败 height: 200px;
}
div img {
width: 50px;
height: 50px;
margin: 30px;
}
</style>
</head>
<body>
<img id="big" src="" alt="">
<div>
</div>
</body>
<script>
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"));
}
})
</script>
</html>
请采纳
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给洞渣携敏底下小图都绑定onmouseover事件
事件触发时，修改上面的图片为底下小图的放纳隐悄大版图片
事件触发时，修改上面的图片为底下小图的放纳隐悄大版图片
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个就是类似于tab切换，下面小图上面大图。
追问
怎么做能给我做一个例子看看吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
