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