PLM之家PLMHome-国产软件践行者

[前端框架] 点击图片方法JS动画效果

[复制链接]

2019-11-7 16:55:28 1948 0

admin 发表于 2019-11-7 16:55:28 |阅读模式

admin 楼主

2019-11-7 16:55:28

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
& E5 e# P' z' T" R2 ~! p
点击图片方法JS动画效果+ v- W. A, k1 C7 y. \, ~+ @

, i8 i9 }( C4 |5 D[mw_shl_code=html,true]<html lang="en">4 @$ c/ j$ A2 C& z" V( W# T

% g0 V. K$ J6 D* d. {, x. D, Z: m% x<head>0 t! x, w( z. C
    <meta charset="UTF-8">
1 l, t9 ^9 P7 k& Q    <meta name="viewport" content="width=device-width, initial-scale=1.0">/ i1 F$ w9 E' x2 f. O
    <meta http-equiv="X-UA-Compatible" content="ie=edge">- j0 f  D( M' U+ u1 w0 s
    <title>Popup Model</title>3 q) i$ w, m5 Q" r* m
7 r8 E) ~' e! l# W5 \
    <style>3 _3 A8 F; o$ p. \* N( _
        /* 弹窗背景 */
3 X. r3 C6 Q2 O* S! a' y        .model {
7 ?, i, ^4 S" B' C( q. V            display: none;+ F$ a5 n5 _1 {
            position: fixed;. A' G6 \6 R9 T0 Z' ]
            /* Stay in place */5 z7 ?9 Z* z$ k* F2 e- M  S
            z-index: 1;  o, H9 _) ]; `& `% v$ L
            /* Sit on top */; @8 g+ y/ d7 M% `! V
            padding-top: 100px;3 q4 t& K# Y5 t# Y8 j% z  Q
            /* Location of the box */7 X! h3 k6 T9 W# n: F' b
            left: 0;
! z5 G  p2 y) X) X9 r: j$ L6 f- L            top: 0;4 ~) @0 K, u  g% l
            width: 100%;
: ~2 M, {. o1 h8 f, F            /* Full width */. j+ v, P! A0 ]- _2 N
            height: 100%;5 L$ E0 J  s) M) J) v" d4 [
            /* Full height */
, C# W& [6 o+ o/ N. t8 P            overflow: auto;
( Z2 X9 h8 i7 K1 s            /* Enable scroll if needed */. Q4 W( R0 g; C9 k! ^! N
            background-color: rgb(0, 0, 0);3 F+ e6 f' X2 e4 W
            /* Fallback color */
0 ?$ r8 z& F6 _/ |1 l4 N            background-color: rgba(0, 0, 0, 0.9);
- m# p1 S1 I2 I0 e( _% m            /* Black w/ opacity */
( x8 }7 B8 }: a1 ?3 ~, I9 `        }
4 `6 z0 P' R2 i  S) @8 j: D  I# {% M( P
        /* 图片 */
: S2 L: I: l* Z! ~+ ~2 r        .modelContent {8 e! b3 [7 S/ |/ i* x
            margin: auto;
4 q0 q' I, u0 |5 O+ G" Q0 B            display: block;
' Y$ u- ^4 S9 K, }* B, z$ P            width: 80%;
6 D- i) c2 n1 M* j4 m            max-width: 700px;
* G2 C0 ?; ^6 Q# ]) n        }
0 R: g" v5 S* ^% _* I& A; K( i4 R# r2 D
        /* 文本内容 */5 W, V8 {, g- Y. m  L8 F" S
        #caption {
6 {  \9 p- N  j! z            margin: auto;
# q/ G! m! B( b* j# s            display: block;0 G6 \  c, }0 U. {# Z  l) z' J1 B
            width: 80%;5 U6 s. ~. L* m  \; B
            max-width: 700px;
8 u4 I) Z: j' X; C) `: H            text-align: center;
# T5 |" o5 \8 v2 T            color: #ccc;+ }7 J) K; B0 F% F; r4 \# E
            padding: 10px 0;
$ W0 Z$ k/ U* \- R; K4 ~            height: 150px;
( A$ v9 h, w0 {- S' }- j8 h) O        }
+ v& M! I; `' s- H       /* 添加动画 */9 }0 r3 e9 r/ c  e
.modelContent, #caption {  
+ d& J& ~8 K' o6 p5 d1 c    animation-name: zoom;
* i9 ^  i3 m) n    animation-duration: 0.6s;2 V$ l4 P& Q0 `8 y9 I' I7 ^
    -webkit-animation-name: zoom;
% }: T7 ?1 y1 H    -webkit-animation-duration: 0.6s;$ l1 H2 T( }$ m) E; j
}8 ^1 ^2 ]! y- W( S+ L

' j4 J* w. I2 L, G# _# N@keyframes zoom {9 r+ C7 ?2 f. L: ^) N  g! W
    from {-webkit-transform:scale(0)} 2 g: r; e  c$ O3 I) I: H- a
    to {-webkit-transform:scale(1)}
) z- Q  |2 q) D; h- z}6 U6 P7 C% j/ O' T$ n

* ^8 a1 t( X3 ]* k9 J' C        #myImg {
, o, d0 Q8 P) d4 N9 t            border-radius: 5px;
, E0 w* k8 h2 u: S! [6 W3 u3 p            cursor: pointer;5 G. _+ t% d8 E& L$ A' H
            transition: 0.3s;
1 N; @# L. f* K; \. m! H        }, @8 Y+ h* l5 |3 e" m1 v
  c. Q" J8 e! T  K
        #myImg:hover {
0 q' O, L+ r; M: B* C            opacity: 0.7;
3 M& ]# M, l$ e3 ^        }- q0 y! K6 O* R* P

8 N5 P: q* D1 W. Y5 P) a% A, V        /* 关闭按钮 */* r( U2 Z; s, l/ c6 q$ ?+ W# y1 A% W
        .close {1 ?: L7 t- Z9 s9 H8 e
            position: absolute;
3 V7 H$ s) `/ S5 u3 d1 w            top: 15px;( y3 n4 Z  X3 m! j% w- [7 G
            right: 35px;
8 q3 n- C, `) m" f* X$ _            color: #f1f1f1;* W$ L8 e1 d6 C/ C) t  \4 r/ v
            font-size: 40px;
- ]% M, z/ D5 H3 T4 r! B            font-weight: bold;( w% ]) N% I3 t! n3 |4 R7 G; U: \4 |
            transition: 0.3s;4 \7 F) C5 D, `4 j/ G8 ^! l* `9 _
        }
# _  n$ E8 q4 m& e% a$ l2 U' J' a2 Q7 \7 w7 |5 @
        .close:hover,
( ]( L- O( Y% G8 b$ D- b        .close:focus {) w1 Q; y- W! [% E" a
            color: #bbb;) r+ \1 K  q, ]
            cursor: pointer;8 {( n6 A) }* h9 L8 c# f. R) x  Q
            text-decoration: none;
2 H( q' q; C0 A- T        }
3 P' ]2 o; M+ t0 l6 ?    </style>/ T9 w5 a# o9 x/ X
</head>7 w0 C) Q; I. A, ~) K+ B
% b3 s! S. r( C9 F: A( m3 J" ^
<body>- ~* p9 I7 ]$ x

7 ~6 c0 j0 n# b8 U* t    <img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">( M7 O) [" O7 |- A6 @- A
1 l, e' D6 f+ X' U2 _

0 P  X" o/ T+ H) @6 y3 V: U. p2 T    <div id="model" class="model">/ t  L: Y) A  R& B# @
, W$ T, B$ Z) e3 o5 B

) W: _) Z: ^# f* m: i2 b        <span class="close">× </span>; Q$ e5 {8 E/ M! \
- i0 n: {, P" l( Q, l+ L( c, z5 k
        <img id='img01' class="modelContent">
; {" h, n+ R0 N% h! Q$ s/ a" K" a; d1 A- C+ O
        <div id="caption"></div>  H! A( F$ P/ A* _( H5 f
! z% t" }1 W0 z* H' ?4 R7 O% L: E7 J
, B$ O6 o9 X6 M
    </div>* W+ g# n2 M9 J% g% ^$ o

* s& M8 E4 Y/ p, u6 q, c2 J8 h: \2 K8 G0 _9 b  K' |* |

4 g8 B8 R. p6 h1 |1 N    <script>
* H/ h* l# [. e* z0 P
1 R2 r/ @( h9 d( c/ m7 f        var imgx = document.getElementById('myImg');- I  k4 G2 g+ m! s
        var modelx = document.getElementById('model');! f% p  O3 Y! y+ {
        var modelcontentx = document.getElementById('img01');
  T; w; l$ g: Q1 u; o        var captioNX = document.getElementById('caption');6 P% A9 M+ J  n) R" f3 j/ I
7 {( y' E( t) u6 N
        imgx.onclick = function () {/ @. m3 P# |: e1 x: |# L
            modelx.style.display = "block";
% a( J( }% L- I; X& ^9 Y            modelcontentx.src = this.src;
6 Z6 T% O5 B+ }# ~4 l            captionx.innerHTML = this.alt;
+ p6 c8 ^2 g1 p- a' d" r+ f/ W
9 f7 `( L$ w3 s        }
! k" e/ u2 c; p3 L$ d2 W' y5 _$ V! |. D* `5 R7 C, `

" B, }7 m! Z9 l8 C" F    </script>
) [8 v1 P1 H" n- _9 Z  b
( Z' [+ I  z: y  X! y* y# H7 h
( ?- S* J" u; |8 b
' Q- P9 w6 l0 u8 {) u6 i2 _  D, `$ W, S( v8 _
</body>8 g; L7 W5 i% J# u  v# {
8 P$ ^$ L9 u% H/ A
</html>[/mw_shl_code]9 H. R1 T, `( h5 W1 ^! f
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了