【yoyo】移入切换
生活随笔
收集整理的這篇文章主要介紹了
【yoyo】移入切换
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><!-- 設(shè)置區(qū)域樣式 --><style>/*設(shè)置展示區(qū)樣式*/.main {width: 500px;height: 400px;border: 3px solid cyan;margin: auto;overflow: hidden;}/*設(shè)置按鈕區(qū)域樣式*/.tip {width: 100%;height: 30px;}/*設(shè)置按鈕樣式*/button {width: 30px;height: 30px; background-color: red;margin-left: 70px;color: white;}/*設(shè)置圖片區(qū)域樣式*/.img_div {width: 300px;height: 350px;background-color: yellow;margin: 20px auto;}/*設(shè)置圖片樣式*/img {width: 100%;height: 100%;background-color: pink;}</style>
</head>
<body><!-- 創(chuàng)建一個(gè)區(qū)域 --><div class="main"><!-- 創(chuàng)建一個(gè)點(diǎn)擊區(qū)域 --><div class="tip"><!-- 創(chuàng)建4個(gè)按鈕 --><button>1</button><button>2</button><button>3</button><button>4</button></div><!-- 創(chuàng)建一個(gè)放置圖片的區(qū)域 --><div class="img_div"><!-- 創(chuàng)建4張圖片 --><img src="1.jpg" alt=""><img src="2.jpg" alt=""><img src="3.jpg" alt=""><img src="4.jpg" alt=""></div></div>
</body>
<script>// 獲取元素內(nèi)容var btn = document.getElementsByTagName('button');var imgDiv = document.getElementsByTagName('img');// 因for循環(huán)執(zhí)行完畢后，最終顯示結(jié)果只能展示第四個(gè)圖片，因此將全局變量i，設(shè)置為局部變量afor (var i = 0; i < btn.length; i++) {(function(a){// 添加執(zhí)行動(dòng)作，通過(guò)鼠標(biāo)顯示選擇圖片btn[i].onmouseover = function(){// 當(dāng)鼠標(biāo)移入時(shí)先隱藏所有照片，按鈕顏色保持不變for (var j = 0; j < btn.length; j++) {imgDiv[j].style.display = 'none';btn[j].style.backgroundClor = 'red';}//改變被點(diǎn)擊的按鈕顏色，并將該按鈕對(duì)應(yīng)的圖片展示出來(lái)this.style.backgroundClor = 'cyan';imgDiv[a].style.display = 'block';}})(i); }
</script>
</html>
效果展示：
總結(jié)
以上是生活随笔為你收集整理的【yoyo】移入切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 动态规划之买瓜子—C说算法系列
- 下一篇： 从0到1 | 转行如何开启机器学习之旅？