JavaScript實(shí)現(xiàn)點(diǎn)擊圖片換背景
更新時(shí)間：2020年11月20日 17:23:13 作者：我是Dreamer啊
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊圖片換背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
JS制作網(wǎng)頁(yè)–點(diǎn)擊圖片換背景，供大家參考，具體內(nèi)容如下
網(wǎng)頁(yè)中有四個(gè)圖片，點(diǎn)擊不同的圖片，更換相對(duì)應(yīng)的背景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
img{
border: 0px;
vertical-align: middle;
width: 192px;
}
div{
width: 768px;
height: 120px;
}
div ul {
overflow: hidden;
background-color: pink ;
margin: 100px auto;
}
div ul li {
float: left;
width: 192px;
height: 120px;
cursor: pointer;
}
body{
background: url(images/1.jpg) no-repeat center top;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src=images/1.jpg> </li>
<li><img src=images/2.jpg></li>
<li><img src=images/3.jpg></li>
<li><img src=images/4.jpg></li>
</ul>
</div>
<script>
var img = document.querySelector('ul').querySelectorAll('img')
for(var i = 0 ;i < img.length;i++){
img[i].onclick = function(){
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)
這篇文章主要給大家介紹了關(guān)于利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)的相關(guān)資料，文中通過(guò)示例代碼分別介紹了實(shí)現(xiàn)該問(wèn)題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
基于javascript處理nginx請(qǐng)求過(guò)程詳解
這篇文章主要介紹了基于javascript處理nginx請(qǐng)求過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JavaScript簡(jiǎn)單計(jì)算人的年齡示例
這篇文章主要介紹了JavaScript簡(jiǎn)單計(jì)算人的年齡,涉及簡(jiǎn)單的javascript字符串轉(zhuǎn)換及日期運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
解析offsetHeight,clientHeight,scrollHeight之間的區(qū)別
這篇文章主要是對(duì)offsetHeight,clientHeight,scrollHeight之間的區(qū)別進(jìn)行了詳細(xì)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)消滅星星案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了javascript匿名函數(shù),以實(shí)例形式詳細(xì)分析了javascript匿名函數(shù)的定義、用法及注意事項(xiàng),具有很好的學(xué)習(xí)借鑒價(jià)值,需要的朋友可以參考下2014-11-11
Javascript實(shí)現(xiàn)通過(guò)選擇周數(shù)顯示開(kāi)始日和結(jié)束日的實(shí)現(xiàn)代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)通過(guò)選擇周數(shù)顯示開(kāi)始日和結(jié)束日的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
使用Math.max,Math.min獲取數(shù)組中的最值實(shí)例
下面小編就為大家?guī)?lái)一篇使用Math.max,Math.min獲取數(shù)組中的最值實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
今天小編給大家分享兩種使用js寫(xiě)的圖片放大鏡效果，原理都差不多，都是采用了兩張圖片給兩張圖片設(shè)定相應(yīng)的尺寸，最后顯示在不同位置，最終實(shí)現(xiàn)放大效果，感興趣的朋友一起看看吧2016-10-10
這篇文章主要給大家介紹了electron-builder打包exe后白屏的解決方法,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01