PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-11-7 16:55:28 | 显示全部楼层 |阅读模式

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

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

x
. t$ T* b3 Y# I- _7 u* }' o
点击图片方法JS动画效果
' o+ T4 r9 L* E* x( K- G6 f
1 ?9 F0 U/ J+ b; I' x[mw_shl_code=html,true]<html lang="en">
9 O+ Y5 T* |% J: `& N; [( b/ a4 Y, z, u  B
<head>4 q$ D' ], p1 G9 t
    <meta charset="UTF-8">
7 [$ U" q0 d$ K8 o' v1 S! ]: b- i    <meta name="viewport" content="width=device-width, initial-scale=1.0">6 Y, E0 T, p0 L7 m3 ~3 K& Y% |
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
" \" U0 T# R6 J# k    <title>Popup Model</title>
+ d# y; ~. v' j$ W* ^( S" ]+ [. Q, `' Y
    <style>& T9 e1 @& J# p+ M" B: m; X
        /* 弹窗背景 */! L" t/ v5 k7 m  s  M
        .model {9 Y# g- {; l5 k( V! w; ^
            display: none;
7 e, j/ R8 n( K            position: fixed;
1 C4 x/ o7 J9 Z4 z. b            /* Stay in place */, s1 ?3 F$ t- ~4 x! [* u
            z-index: 1;- m7 s3 g$ v" _
            /* Sit on top */  h$ x, v$ R6 N9 q! \
            padding-top: 100px;( B: [* V3 {8 D/ R* V
            /* Location of the box */' P3 s5 C) e# e5 C" u* b
            left: 0;
( g3 o+ L4 [' }7 V3 A4 a            top: 0;! _9 x5 U& F+ H# B9 J  c
            width: 100%;
6 M9 A4 |% w! T/ j            /* Full width */
3 V4 l. F6 G( `$ Z' y3 `            height: 100%;
2 D0 D1 w- R) N" B# i3 N            /* Full height */
, U* [- h7 S: _8 G" r            overflow: auto;
/ M; n; R! W2 w. E, y            /* Enable scroll if needed */
# z1 P2 u5 f  T3 M1 J, l8 ^            background-color: rgb(0, 0, 0);, v4 {0 O7 s9 P+ f
            /* Fallback color */
% z: T9 {8 t$ S4 o, U: i. V            background-color: rgba(0, 0, 0, 0.9);
, D! T  z2 Z2 ^3 `            /* Black w/ opacity */
) X, K5 D2 o9 N& u$ }0 J1 o        }0 N8 F# o) v% n" ~7 [+ o  [! B0 H9 V

* X" ~1 O8 f* ^$ T4 X' _        /* 图片 */
$ h2 `3 I6 B- J+ u+ v0 Z) P        .modelContent {
$ x7 P* `7 ?# Q  i            margin: auto;
3 G: z' R( H5 I$ `1 \% Q; s            display: block;; w2 ~- s6 N8 _5 ^( s# K( Q
            width: 80%;
2 D8 `4 V7 a* q: f' }            max-width: 700px;) a! d3 I( M  a: J5 S( f
        }
) K0 A& t9 c! H/ N. U* T! d4 l. n& Y2 C2 [
        /* 文本内容 */. e  }) T) v# E* U
        #caption {9 L9 ~$ ^; x5 \1 n, R
            margin: auto;
0 h5 c  s, I" V3 K8 F; b            display: block;7 r% O# J+ j$ W3 T" [* F
            width: 80%;* S( B+ J2 L* {' F7 {1 |+ j
            max-width: 700px;
' ]4 k' r+ ]8 R. U# h/ _            text-align: center;. o* k: d+ b: Z/ S5 L* e1 H
            color: #ccc;* L, S% j4 ^4 u/ K. z/ F
            padding: 10px 0;
: }7 Y3 }0 I  D9 n( t            height: 150px;5 ?+ ]" o* u, m6 _% ]8 O
        }5 \( o6 W( U9 Z
       /* 添加动画 */* V6 |" N3 h* l
.modelContent, #caption {  
; g* I' k" K1 G3 O+ g% D    animation-name: zoom;
, c2 T' {. W/ l- L    animation-duration: 0.6s;
. o1 h+ z  x/ _$ G/ R1 X    -webkit-animation-name: zoom;
. ?! i$ i# q3 E% n# L+ q3 }    -webkit-animation-duration: 0.6s;. G$ ]& O$ G! [. ?& Y) v1 K
}
$ u3 z$ Q1 B/ ~
  ~3 u* @0 P# c/ B$ K+ j@keyframes zoom {
+ h- w: W. e% ?, Q* X( n1 w" l3 D  P    from {-webkit-transform:scale(0)}
" t6 l- f5 I# F# G  o    to {-webkit-transform:scale(1)}
3 T! f1 n9 L& Q8 y, j7 b2 z}! ?6 U1 n; y# X* ?0 K

; _5 m2 G* h1 F! ]) [3 ]! ?        #myImg {& Z) a9 l/ _9 _2 u
            border-radius: 5px;
. X9 Q4 b- h+ W' G% A            cursor: pointer;
& O) ^5 [$ {. ^' \& J4 Y! T            transition: 0.3s;
! W  v- O7 s6 g( y9 x( A! g+ Y        }
8 Z0 O7 }3 U( }4 X, y
. m" r6 t( G7 N+ ^" w        #myImg:hover {
" x: l9 L2 y8 [# K            opacity: 0.7;: Z, e8 [0 N& m& e! B) [" e
        }
# z. h& Z0 ~: b6 p  U3 i0 z4 l1 G+ ~1 n9 X, M
        /* 关闭按钮 */
+ I; ^& h0 b5 I5 m& A" ^        .close {* i, Y; H" k1 {2 H, K/ Q) f( u. {
            position: absolute;
; x  g, G1 v7 f3 G            top: 15px;
! J* S! M' _: ?7 i, ?* p            right: 35px;
" j3 p: ~, C  w$ I; s: t: C6 q1 y            color: #f1f1f1;, V4 C# s0 u$ c9 C& m
            font-size: 40px;  @! s( @1 e) C7 u4 i2 e
            font-weight: bold;3 ]1 p! j/ H' `" v% I" _
            transition: 0.3s;3 k# Q: L6 x, j, v  ~2 `) |
        }0 p  B: s$ H% g; I9 l7 g5 T8 F

9 B6 d8 N8 O3 S# C        .close:hover,
. [# K% r$ A) q4 G7 w' _( i- [8 r        .close:focus {
& R, s3 b2 J, a$ E: V            color: #bbb;
& b  D' y; B' K, p            cursor: pointer;
; R  t$ U; P' }            text-decoration: none;
8 |% `( R4 v- B3 O5 E$ D4 w: P1 r        }
) D. S& _2 k' o3 ?4 r    </style>
, R1 U, W; l( {1 O4 f! v# X</head>( r2 K, U& \% m* h' U% K1 M2 k

4 T' e; k) ~4 C1 W# h) O<body>1 A: v' |5 d/ O2 J2 v& t, k3 L% U' I
, \3 @. D2 B9 ^. k8 @
    <img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">
0 |! Q1 Z% l0 M% q+ {( k( W% l3 W" D4 Y+ [, R/ r6 o% i

; _  _  x/ ^. V2 n# Y- \    <div id="model" class="model">  W! P7 p  J/ T) T. M1 j) K

. ]/ b7 S1 F2 C  z) z9 H) j7 X' |6 d& n
        <span class="close">× </span>! k8 R: t+ c3 ^% L. s# u$ ~

3 J/ R. U' X- o+ M* P' T- e        <img id='img01' class="modelContent">
% b# D' L' c5 w! h0 p
. N8 s4 W1 J' e7 I        <div id="caption"></div>
' O& Q8 m' r! g" _. U  g
( P- g. j8 B+ W, g* O
! E* M4 i; b" o: l    </div>
- b# D$ f( ~4 g" M8 K9 Q- J% W: Q  k' Y3 w1 ~

) ?: `- n/ v: i# m4 y5 Z3 F$ T' q9 \" K: H# E$ w" @4 }( q
    <script>. J  @$ X" p1 P. L/ q- c1 j9 Z. L
$ K. s( v3 s, d  ]* g1 x
        var imgx = document.getElementById('myImg');* S# Q$ u1 m& |( c% p
        var modelx = document.getElementById('model');
# w- O4 J$ L" v$ I        var modelcontentx = document.getElementById('img01');; ^" l) E1 o8 x* S1 k
        var captioNX = document.getElementById('caption');9 w6 q5 I# a6 R$ Y" T2 U

/ I$ c5 i. R( d7 c& [% i        imgx.onclick = function () {
( |3 I7 Y, m1 e, k" [  G. Z/ V            modelx.style.display = "block";, x5 `. T- l+ T0 |7 o, O" R
            modelcontentx.src = this.src;& P# z9 ]( V$ n: E; A
            captionx.innerHTML = this.alt;, N' C: i* Z$ m

$ R3 J* {! p& G1 ]; |1 @5 x        }' K& }+ u: F8 T

6 G+ d9 T: b. c; d- ?$ U0 a& t' F; m  ]% q- C% ?
    </script>( D3 s8 n' z+ |) }
+ K  p0 a% M+ V5 m

# }6 {0 o9 E3 |5 N) ~% Y9 ]! m4 H( s# @. Q' L& [% [3 g& v* l

# c! t" h9 n0 r& @8 @</body>, ]" \( m' a/ f$ |& `5 Q3 G
9 U" N* a, i4 {4 F
</html>[/mw_shl_code]- F/ L& y/ A6 ]( I, P
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了