JS實(shí)現(xiàn)網(wǎng)站換膚
本文實(shí)例為大家分享了JS實(shí)現(xiàn)網(wǎng)站換膚的具體代碼,供大家參考,具體內(nèi)容如下
先看效果
1、左側(cè)是待選擇的圖片列表
2、點(diǎn)擊對(duì)應(yīng)圖片自動(dòng)為當(dāng)前網(wǎng)站換背景圖片
3、為當(dāng)前選擇的圖片加個(gè)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"); ? ? ? ? // 注冊(cè)事件并處理 ? ? ? ? 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)初始化所有圖片的邊框,不然點(diǎn)擊一個(gè)就會(huì)產(chǎn)生一個(gè)邊框。
for(var i = 0; i < imgs.length; i++){ ? ? imgs[i].style.border = "none"; }
接著再為當(dāng)前選擇的圖片加上邊框
this.style.border = "2px solid red";
×為body更換背景圖片時(shí),需要注意css的寫法backgroundImage, 且還需注意js中字符換和變量的拼接方法
document.body.style.backgroundImage = "url(" + this.src + ")"
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js+css簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁換膚效果
- js動(dòng)態(tài)修改整個(gè)頁面樣式達(dá)到換膚效果
- Javascript結(jié)合css實(shí)現(xiàn)網(wǎng)頁換膚功能
- js實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁換膚效果
- js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁換膚功能
- JavaScript實(shí)現(xiàn)換膚功能
- javascript實(shí)現(xiàn)動(dòng)態(tài)CSS換膚技術(shù)的腳本
- JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
- AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例
- js實(shí)現(xiàn)一鍵換膚效果
相關(guān)文章
js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12Javascript動(dòng)畫的實(shí)現(xiàn)原理淺析
這篇文章主要介紹了Javascript動(dòng)畫的實(shí)現(xiàn)原理淺析,本文用兩個(gè)實(shí)例來解釋Javascript動(dòng)畫的實(shí)現(xiàn)原理,需要的朋友可以參考下2015-03-03原生js通過一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖
這篇文章主要介紹了原生js一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-06-06jquery的$(document).ready()和onload的加載順序
最近在改一個(gè)嵌入在frame中的頁面的時(shí)候,使用了jquery做效果,而頁面本身也綁定了onload事件。改完后,F(xiàn)irefox下測(cè)試正常流暢,IE下就要等個(gè)十幾秒jquery的效果才出現(xiàn),黃花菜都涼了。2010-05-05JavaScript hasOwnProperty() 函數(shù)實(shí)例詳解
hasOwnProperty()函數(shù)用于指示一個(gè)對(duì)象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數(shù)實(shí)例講解,感興趣的朋友一起看看吧2017-08-08javascript學(xué)習(xí)隨筆(使用window和frame)的技巧
javascript學(xué)習(xí)隨筆(使用window和frame)的技巧...2007-03-03