|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) @( C4 _: |! J& J# p点击图片方法JS动画效果
, l3 b4 O9 k/ T# _6 ^7 N$ W# d- E8 s! C% Q3 k# \9 J
[mw_shl_code=html,true]<html lang="en">* o$ T+ M: a$ O X
- O) o$ d/ S8 [% i" k5 ~<head>* C B) J X& M8 m
<meta charset="UTF-8">
/ [5 a$ O/ p+ m+ R- R. b/ B <meta name="viewport" content="width=device-width, initial-scale=1.0">1 H5 Q. f: M" e
<meta http-equiv="X-UA-Compatible" content="ie=edge">+ Z% W6 i6 H6 t) R. T/ e% N
<title>Popup Model</title>3 O+ |" O: ]* b1 h
6 y/ [& B4 M% ~; E: W# z/ X <style>5 t2 s8 J* y3 P! Q
/* 弹窗背景 */
1 w0 S3 B* }# C+ H( W, G .model {& u' c2 Q' Q0 ]# r) s+ G
display: none;
' S( u! ^" z. D position: fixed;
& G8 a3 J: x; W0 ` /* Stay in place */1 l9 ?3 j# E. H8 S5 [7 e( Q
z-index: 1;' X! s' {9 c9 N! ~3 m4 c& D0 s
/* Sit on top */4 |, F+ P3 C5 e
padding-top: 100px;
2 \6 `+ X# \" p1 s /* Location of the box */8 y5 j+ B- n ^2 J9 d+ p4 s: X5 t
left: 0;) J3 f; L) Y8 w8 U7 Z) P
top: 0;
: }0 [2 V. X# l/ \6 M! o+ X8 n width: 100%;3 i) N# M5 F2 q
/* Full width */- d% w. v: d! Q) ` p
height: 100%; x# H* ]& K( Q) o- `' y
/* Full height */* i. \* t) x( K" \
overflow: auto;" {5 f! I/ P; E
/* Enable scroll if needed */. u( a) C. ]5 c# s
background-color: rgb(0, 0, 0);
$ a, S9 v) t3 ]# x9 H* ^7 S# T /* Fallback color */
0 ]8 Y% E7 W# e/ O2 _# H background-color: rgba(0, 0, 0, 0.9);2 H4 [2 v* [: i2 O
/* Black w/ opacity */
" [0 [. [% \; r% s) I8 N6 |& l }
1 h) x. }( e0 L
/ G3 j5 `8 h( a8 {( o- x0 h; _* I /* 图片 */0 C f: [5 Q: ~+ T
.modelContent {
; N+ r# V4 q3 I. k, Q" Y z$ K9 R( k" L margin: auto;( x- Q; h8 e) E8 O: K- k
display: block;* E2 a k! u$ Z* H6 ]
width: 80%;, d: V i! F, U# L2 C" K8 g
max-width: 700px;: c& r9 o6 y5 X. n
}
4 o! U2 l4 c; ^% ?
' i: A/ @: ?2 h /* 文本内容 */" h" l0 o5 d* F$ f
#caption {
) K! n" ?1 U3 o- V$ F% E margin: auto;/ h& `& `4 k! b0 l: N K5 t
display: block; q1 `# H+ N( h7 L* |
width: 80%;
, y9 o; I* I+ O8 t' ~5 O* u% g max-width: 700px;
) y/ t2 r7 ~- K1 Z- a* b text-align: center;0 S8 o+ K# X8 Q+ Y/ o
color: #ccc;
2 Z/ z) V2 M& L( a# t padding: 10px 0;0 P% t2 k2 t M7 j
height: 150px;
9 l$ V5 r1 R7 m: K; Q }4 b, ]0 G g5 o" \
/* 添加动画 */1 X2 Z: Z0 D. ~$ V( w+ E! W
.modelContent, #caption {
: i- A+ c! V' d: s& ] animation-name: zoom;
6 I8 q4 X0 i' {; O: V animation-duration: 0.6s;+ B/ d! e( A6 @( ~. V9 e/ V
-webkit-animation-name: zoom;
$ a8 f5 Y& ]$ q8 C$ V: ` -webkit-animation-duration: 0.6s;9 A- D- o- b+ d! ?( a
}
5 i2 {; F7 y+ Y/ N$ A, j* a3 S
$ u# k2 T* `9 p" s2 U@keyframes zoom {
& K( ~+ ~: h/ L% H. a4 z from {-webkit-transform:scale(0)} / |+ F! d% h% y$ |6 y) M% O0 \
to {-webkit-transform:scale(1)}
* h* |0 a. |" u7 w8 x) m; C}/ U- }; @, N4 K. k- n
/ h! T) n! P3 L+ d9 H+ P #myImg {! [ `+ v. L4 D
border-radius: 5px;
! p& H" H6 ^9 X: L) C& I cursor: pointer;
( x) Q' W" } e1 c: a transition: 0.3s;7 t5 [ P) w4 D
}
! _% C( B; H4 b& h4 p _& S4 C* p! O" @8 F
#myImg:hover {
, n+ I8 A$ a! g+ C5 n! X opacity: 0.7;. u# B5 J3 @$ o+ s+ K: n5 K1 M
}
. S3 C, v+ c- w8 x! T% R3 b# m5 E. t% q$ N3 |
/* 关闭按钮 */$ F) T; `; k6 B' P: f0 G" {% _
.close {) E, o6 d; G3 b# p
position: absolute;
8 _- d: J* Z9 K top: 15px;
- _) R$ l6 e( i8 ? right: 35px;1 J* {9 z' Q/ D1 t/ q# `: T
color: #f1f1f1;+ _2 Y& \0 [, Y; a1 @5 x( ]
font-size: 40px;
6 z& ?+ h0 h3 L" C font-weight: bold;9 E$ y7 z: c4 T
transition: 0.3s;
) m" r& t# L$ o1 c1 Q }5 m1 [0 o# w% r1 F% E! K E
: D4 R( O: u! y" X, L, [2 J .close:hover,# J5 l& h( L, e: ^: j7 J
.close:focus {
3 w+ @, E$ ?( N; J2 r$ @% w color: #bbb;
4 Z1 A7 c) }/ {! f4 A4 h cursor: pointer;1 q3 r) D+ s3 c1 _/ l! o" B! a
text-decoration: none;7 Z, h2 T; }$ ]# L, |% u: t4 m3 D3 P8 o
}
o8 H/ _6 R( h% i </style>
$ f$ e. y9 \+ r, s+ W: l$ k</head>
i* `. z! q" {
1 O E- Z4 a# A' _, T<body>; \# a$ d. T# q8 {& n* F
* K* s c' D" N& K, ]* {* s
<img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">
1 R" e2 M! o5 G
% u2 x0 x& P, ]7 s6 Z( S) b: J: D1 a" S( }' k, ?6 Z
<div id="model" class="model">' M/ U- y# y% i- w9 E; G8 x ~
% r! M0 X; G7 I1 _2 E" S8 ~( \, [8 K
<span class="close">× </span>9 a5 u! K. E0 w5 \2 q( {* I
2 }& c( w+ N4 z( P <img id='img01' class="modelContent">
r6 q+ a, U7 e2 k
; X. l4 ]& W/ ^" r6 Z2 L( f' { X <div id="caption"></div>7 F! E5 ?! y# R. e8 f: l
9 \# P# M1 l0 i/ G2 m
6 D4 |5 J; A- i) E E( g- ` </div>3 r; t7 y2 B* b
5 {& a. _/ ]1 W6 o L: j/ n( p( I2 o: h3 \
$ I$ s; F! n6 a! X" X1 q3 Y
<script>+ r& n, _% i% R* @! ~5 J
. P7 j' i4 w9 _$ f6 Y+ S var imgx = document.getElementById('myImg');
# N1 s+ d" x. X( T- Y, H var modelx = document.getElementById('model');, D3 k0 T, i3 _4 O4 y, ]" E! H1 w
var modelcontentx = document.getElementById('img01');
( B2 e- f4 D1 H. n5 Q' V var captioNX = document.getElementById('caption');! a0 ?% J5 j' {7 f
* `9 n, ?# }0 e imgx.onclick = function () {
; H0 n; o; B/ W* b; c+ r modelx.style.display = "block";
$ {( n# Z+ V' N$ B( l! {" M modelcontentx.src = this.src;
/ x1 R6 |: H' i captionx.innerHTML = this.alt;9 u2 ?# }* I2 a$ [, I, @
) m" _0 s* z: G( o
}5 p, ~* I6 J" Z% f
: E; ^/ U' ~( w. V5 u* c4 p* |) x! r/ M
</script>% ~9 T6 A. z3 O4 X- j" \
; v2 p8 [/ M$ v8 O. V# ~
5 ?1 H8 |$ p! v7 j
: Q6 Y v+ Q' x( I: u
% @/ r& O1 g. X3 V</body>2 B& r2 z% W# l& ]1 D! f
1 U3 q9 t. d$ P
</html>[/mw_shl_code]
q/ x. B. w; N. O) j( ^ |
|