原生JavaScript實現(xiàn)換膚
更新時間：2021年02月19日 10:41:06 作者：weixin_44134972
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)換膚，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
原生JavaScript實現(xiàn)換膚的具體代碼，供大家參考，具體內(nèi)容如下
原理
通過點擊事件，獲取點擊的的圖片的信息，在HTML背景圖片的路徑改變
css樣式
<style>
body{
margin:0;
padding:0;
background:url(img/1.jpg) no-repeat;
background-size:100% 100%;
}
#box{
width:100%;
height:130px;
background:#999999;
}
#box ul{
margin:0;
padding:0;
list-style:none;
}
#box ul li li,#box ul li img{
width:180px;
height:120px;
float:left;
margin:5px 60px;
}
</style>
HTML源碼
<body id="Body"> <div id="box"> <ul> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> </div> </body>
JavaScript源碼
<script>
var oBody=document.getElementById('Body');
var oImg=document.getElementsByTagName('img');
for(var i=0;i<oImg.length;i++)
{
var oImgA=oImg[i];
oImgA.index=i+1;
oImgA.onclick=function(){
//console.log(this);
oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';
oBody.style.backgroundSize='100% 100%';
};
}
</script>
效果圖
點擊切換
源碼
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>換膚</title>
<style>
body{
margin:0;
padding:0;
background:url(img/1.jpg) no-repeat;
background-size:100% 100%;
}
#box{
width:100%;
height:130px;
background:#999999;
}
#box ul{
margin:0;
padding:0;
list-style:none;
}
#box ul li li,#box ul li img{
width:180px;
height:120px;
float:left;
margin:5px 60px;
}
</style>
</head>
<body id="Body">
<div id="box">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
</div>
</body>
</html>
<script>
var oBody=document.getElementById('Body');
var oImg=document.getElementsByTagName('img');
for(var i=0;i<oImg.length;i++)
{
var oImgA=oImg[i];
oImgA.index=i+1;
oImgA.onclick=function(){
//console.log(this);
oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';
oBody.style.backgroundSize='100% 100%';
};
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
一個不錯的字符串轉(zhuǎn)碼解碼函數(shù)(自寫)
一個不錯的字符串轉(zhuǎn)碼解碼函數(shù),自己寫的，有需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細介紹了原生js實現(xiàn)隨機點名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
我們首先把window.innerWidth和window.innerHeight的值分別付給了pageWidth和pageHeight。2011-08-08
這篇文章主要介紹了小程序兩種滾動公告欄的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
js中本身是沒有trim函數(shù)的，不過你可以自己寫一個，下面的實現(xiàn)方法是用到了正則表達式，效率不錯，并把這三個方法加入String對象的內(nèi)置方法中去2013-10-10
詳解如何使用JavaScript中Promise類實現(xiàn)并發(fā)任務(wù)控制
在JavaScript中,Promise是一種用于管理異步操作的強大工具,但是,有時候需要更高級的控制,以限制同時執(zhí)行的任務(wù)數(shù)量,以避免系統(tǒng)資源超負荷,本文將深入探討JavaScript中的并發(fā)任務(wù)控制,并介紹如何創(chuàng)建一個自定義的Promise類——ConcurrentPromise2023-08-08
webpack4手動搭建Vue開發(fā)環(huán)境實現(xiàn)todoList項目的方法
這篇文章主要介紹了webpack4手動搭建Vue開發(fā)環(huán)境實現(xiàn)todoList項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法
百度個人云盤空間大，完全免費，而且提供了pcs api供調(diào)用操作文件，在平時的項目里往里面保存一些文件是很實用的。通過本文給大家介紹使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
這篇文章主要介紹了JS獲取地址欄參數(shù)的兩種方法(原生、vue),文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能
現(xiàn)在很多網(wǎng)站都有輪播圖,下面這篇文章主要給大家介紹了關(guān)于JS如何使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11