【HTML】实现背景切换

wangy · 发表于 2021-6-30 23:35:35

<!DOCTYPE html>: Y- m% n1 o8 u, i6 X) S
<html lang="en">
) G% h5 G1 c/ _' X q* b* [# b: }
# P; s2 d$ p! }! p# H V
<head>
5 k. v9 S; N t) [
<meta charset="UTF-8">
* n" a8 K5 z! e% Y
<meta name="viewport" content="width=device-width, initial-scale=1.0">
; W$ Q2 E r, V% R
<title>背景换肤</title># x( V+ Y$ w6 f$ C. ?
<style>1 Q7 f E" U( n/ R
body {
4 o: L7 Z0 N" e0 ~& W' ~9 l
/* margin-top: 50px; */
[( e5 q' _9 ?4 }4 _
position: relative;% I5 L: G1 }9 \7 ^, l# |9 ^6 _
display: flex;
0 ], y* N; U) I
justify-content: center;( b7 x; m6 i( s7 c ?& `7 h
background: url(http://pic.netbian.com/uploads/allimg/170610/174855-1497088135bff2.jpg) no-repeat center top;
* i6 [% u2 G, ]) |
background-size: 100%;
: g9 r7 q1 g) m9 H1 u9 z
}
( Y% b8 O/ W1 M; A+ W
: H3 G, q/ K* y9 i0 ?& J; q
.pifu {
4 A8 l0 S& Y# I7 R
width: 60%;
' E2 L: ]* `( @' @
position: fixed;
# G; R( t2 P( t
bottom: 40px;8 W' ^9 ?7 b. ], ~
margin: 0px;7 G& w+ L* c* y2 @' G4 Z
padding: 0px;: |( R; X3 o4 l, ~. i; y
list-style: none;
L$ k5 f# c/ u( @ U4 ~4 Q
/* margin-left: 25%; */; r- @* Z& R5 F6 ^: x& P b% o9 K
}9 n D# }9 U6 l
# ?3 k( S; H# ]3 N, D! p
.pifu li {1 y( x/ j- i8 g# _
width: 25%;# n& Y5 W) b( V. c
/* height: 100px; */5 L; E$ F! O8 L* @0 a9 Z
border: 2px solid rgba(255, 255, 255, 0);
6 O& d( f3 h# p* P
border-radius: 5px;% c. A* j# t7 M1 p0 a
overflow: hidden;/ B/ _4 X0 j% K7 K: n2 ^/ F
float: left;" N" }& A! W/ R+ c
transition: 0.5s;
& t2 a% _# O" B$ j
box-sizing: border-box;8 ~' n, ?% P$ K! K9 H/ T! y* ?8 T1 A
/* height: 100px; */
# c+ F* n1 E& A
}; w$ ~2 \5 R% a6 a* M( E
& M2 N* Y) {5 `& e% J; x* T
.pifu li:hover {! B5 j/ V8 P$ @
transform: scale(1.1);/ @! t: U. }% q
}
0 b) z- ~* v; V/ n& G
! ^0 [8 E; B! j# Z. g6 q- V
.pifu::after {5 C4 u# x! J, m- t+ J
/* overflow: hidden; */
& T5 w- y& ]) g% F4 C. T( R
content: '';
# w% J" C( }5 h7 J1 @
display: block;
4 p2 b: a# u3 v+ }+ ^4 Z1 p. i; \, v
clear: both;
- n1 `" N- F3 w% R4 T/ T8 ?4 S- i
}( e8 I5 Y' J4 q: n$ C
' { g8 H# c; j1 q$ S# X, u4 P- T/ ? p
.pifu li img {8 J' U' T3 D7 U2 `8 X {' d
display: block;
; j2 o; [4 C f: [' x
height: 100%;
7 R) {5 Y, W6 W- ?8 Y* ~( I
width: 100%;9 c: m4 g, q; C5 I+ {. t6 `
}% `) w1 G0 b9 f( K( ^8 J2 k
</style>+ H; }3 [% T k# g' p$ d* x' o( R
</head>8 E7 v; D, ]: |6 e( ` M) L0 e
& M" s; L, Q+ U; _
<body>
8 {4 F2 G- v8 g( K/ P
<ul class="pifu">7 K, X! J; v8 d4 U
<li><img src="http://pic.netbian.com/uploads/allimg/170610/174855-1497088135bff2.jpg" alt=""></li>9 o3 N+ p5 Z/ ] ?3 x6 w: c; r
<li><img src="http://pic.netbian.com/uploads/allimg/180726/192524-153260432471a0.jpg" alt=""></li>
9 L; E3 Q4 E7 @7 ]$ P
<li><img src="http://pic.netbian.com/uploads/allimg/180709/175550-15311301507dba.jpg" alt=""></li>- j( U/ `8 Z& B7 p2 F) L8 T
<li><img src="http://pic.netbian.com/uploads/allimg/170610/214826-14971025069c01.jpg" alt=""></li> X8 J& q+ w' J# ^
</ul>3 X1 y, e9 ^0 B4 V$ n3 d2 n( L
<script>* z0 ~6 R, `. ?
var img = document.querySelector('.pifu').querySelectorAll('img');
for (i = 0; i < img.length; i++) {
4 O' _* ^- y& a: B* ?
img[i].onmouseover = function() { e. O- `$ }1 B# U/ z
document.body.style.backgroundImage = 'url(' + this.src + ')';. R0 m r- h% \7 |
}
. z8 N8 d" ~5 s& N ~
img[i].onclick = function() { P- X5 t. A- w" |
document.body.style.backgroundImage = 'url(' + this.src + ')';
, q2 k# E' o# U
}
, P5 f( A K5 m# J2 m6 w/ O+ U
}: b5 v# f3 d$ p) R( B
</script>
6 g; U7 U; e4 o
</body>) q3 `; K- l7 X9 T
; I+ @8 b N7 Y+ ?& a
</html>

复制代码

[js,sql,html教程] 【HTML】实现背景切换

荣誉管理

论坛元老