本文主要是介绍悬浮切图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
主要是学习切换图片路径的思想
效果如下:
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.Character{width: 555px;height: 222px;}.img{width: 50px;height: 50px;border: 1px skyblue solid;border-radius: 50px;overflow: hidden;float: left;margin-left:30px;}</style></head>
<body><div class="Character"><div class="img"><img src="" alt="" width="100%"></div><div class="img"><img src="" alt="" width="100%"></div><div class="img"><img src="" alt="" width="100%"></div></div><div><img src="" alt="" id="Show"></div></body><script>var arr = [{imgSrc:"../img/img0.jpg",imgName:"第0张图片"},{imgSrc:"../img/img1.jpg",imgName:"第1图片"},{imgSrc:"../img/img2.jpg",imgName:"第2张图片"}];var Character = document.querySelectorAll(".Character img");var Show = document.querySelector("#Show");console.log(Show);console.log(Character);for(var i = 0;i < Character.length;i++){Character[i].src = arr[i].imgSrc;}var img = document.getElementsByTagName("img");for(var j = 0;j < Character.length;j++){(function (j) {img[j].onmouseover = function () {Show.src = img[j].src;}})(j)}</script>
</html>
这篇关于悬浮切图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
