JS實現(xiàn)網(wǎng)站換膚
本文實例為大家分享了JS實現(xiàn)網(wǎng)站換膚的具體代碼,供大家參考,具體內(nèi)容如下
先看效果
1、左側(cè)是待選擇的圖片列表
2、點擊對應(yīng)圖片自動為當(dāng)前網(wǎng)站換背景圖片
3、為當(dāng)前選擇的圖片加個2px的border
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>網(wǎng)站換膚</title> ? ? <style> ? ? ? ? body { ? ? ? ? ? ? background: url(images/abc-123.jpg) no-repeat center; ? ? ? ? } ? ? ? ? ul li { ? ? ? ? ? ? list-style: none; ? ? ? ? } ? ? ? ? .baidu img { ? ? ? ? ? ? width: 100px; ? ? ? ? } ? ? ? ? .baidu li:hover img { ? ? ? ? ? ? border: 1px solid red; ? ? ? ? } ? ? </style> </head> <body> ? ? <ul class="baidu"> ? ? ? ? <li><img src="images/Colorful-Abstraction01.jpg" alt=""></li> ? ? ? ? <li><img src="images/Colorful-Abstraction02.jpg" alt=""></li> ? ? ? ? <li><img src="images/Colorful-Abstraction03.jpg" alt=""></li> ? ? ? ? <li><img src="images/abc-123.jpg" alt=""></li> ? ? </ul> ? ? <script> ? ? ? ? // 獲取元素 ? ? ? ? var imgs = document.querySelectorAll("img"); ? ? ? ? // 注冊事件并處理 ? ? ? ? for(var i = 0; i < imgs.length; i++){ ? ? ? ? ? ? imgs[i].onclick = function(){ ? ? ? ? ? ? ? ? document.body.style.backgroundImage = "url(" + this.src + ")"; ? ? ? ? ? ? ? ? for(var i = 0; i < imgs.length; i++){ ? ? ? ? ? ? ? ? ? ? imgs[i].style.border = "none"; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.style.border = "2px solid red"; ? ? ? ? ? ? } ? ? ? ? } ? ? </script> </body> </html>
×為當(dāng)前選擇的圖片加2px邊框前,需要使用for循環(huán)初始化所有圖片的邊框,不然點擊一個就會產(chǎn)生一個邊框。
for(var i = 0; i < imgs.length; i++){ ? ? imgs[i].style.border = "none"; }
接著再為當(dāng)前選擇的圖片加上邊框
this.style.border = "2px solid red";
×為body更換背景圖片時,需要注意css的寫法backgroundImage, 且還需注意js中字符換和變量的拼接方法
document.body.style.backgroundImage = "url(" + this.src + ")"
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery的$(document).ready()和onload的加載順序
最近在改一個嵌入在frame中的頁面的時候,使用了jquery做效果,而頁面本身也綁定了onload事件。改完后,F(xiàn)irefox下測試正常流暢,IE下就要等個十幾秒jquery的效果才出現(xiàn),黃花菜都涼了。2010-05-05JavaScript hasOwnProperty() 函數(shù)實例詳解
hasOwnProperty()函數(shù)用于指示一個對象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數(shù)實例講解,感興趣的朋友一起看看吧2017-08-08javascript學(xué)習(xí)隨筆(使用window和frame)的技巧
javascript學(xué)習(xí)隨筆(使用window和frame)的技巧...2007-03-03