前端JavaScript小案例——百度換膚效果
話不多說直接給大家上代碼：
HTML結構部分：
<body> <ul class="baidu"> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""></li> <li><img src="images/4.jpg" alt=""></li> </ul> </body> </html
CSS樣式部分：
<style> * { margin: 0; padding: 0; } body { background: url(images/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style>
JavaScript行為代碼部分：
<script>
// 百度換膚效果：用戶點擊哪一種圖片該圖片就設置成body的背景圖片
var imgs = document.querySelector('.baidu').getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) { // 用循環遍歷出所有的img元素
imgs[i].onclick = function () { // 點擊哪張圖片就給該圖片注冊事件
// this.src返回的就是當前圖片的src路徑，再把這個路徑給到body作為背景圖片即可
// document.body 用於獲得body元素對象
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
運行效果：
點擊了哪張圖片該圖片就會被設置為body的背景圖片，實現了點擊給頁面“換膚”的效果。