JavaScript實現(xiàn)點擊圖片換背景
更新時間：2020年11月20日 17:23:13 作者：我是Dreamer啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊圖片換背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS制作網(wǎng)頁–點擊圖片換背景，供大家參考，具體內(nèi)容如下
網(wǎ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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用JavaScript如何查詢某個值是否數(shù)組內(nèi)
這篇文章主要給大家介紹了關(guān)于利用JavaScript如何查詢某個值是否數(shù)組內(nèi)的相關(guān)資料，文中通過示例代碼分別介紹了實現(xiàn)該問題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來一起學習學習吧。2017-07-07
這篇文章主要介紹了基于javascript處理nginx請求過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JavaScript簡單計算人的年齡,涉及簡單的javascript字符串轉(zhuǎn)換及日期運算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
解析offsetHeight,clientHeight,scrollHeight之間的區(qū)別
這篇文章主要是對offsetHeight,clientHeight,scrollHeight之間的區(qū)別進行了詳細介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)消滅星星案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了javascript匿名函數(shù),以實例形式詳細分析了javascript匿名函數(shù)的定義、用法及注意事項,具有很好的學習借鑒價值,需要的朋友可以參考下2014-11-11
Javascript實現(xiàn)通過選擇周數(shù)顯示開始日和結(jié)束日的實現(xiàn)代碼
這篇文章主要介紹了Javascript實現(xiàn)通過選擇周數(shù)顯示開始日和結(jié)束日的實例代碼的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
使用Math.max,Math.min獲取數(shù)組中的最值實例
下面小編就為大家?guī)硪黄褂肕ath.max,Math.min獲取數(shù)組中的最值實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
今天小編給大家分享兩種使用js寫的圖片放大鏡效果，原理都差不多，都是采用了兩張圖片給兩張圖片設(shè)定相應的尺寸，最后顯示在不同位置，最終實現(xiàn)放大效果，感興趣的朋友一起看看吧2016-10-10
這篇文章主要給大家介紹了electron-builder打包exe后白屏的解決方法,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01