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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

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

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

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

x

! N/ C; E  B* `$ _$ [4 R点击图片方法JS动画效果4 q: {! i" H4 I8 \: \
4 c+ s  J- o! h# ^" d2 M: ^
[mw_shl_code=html,true]<html lang="en">  }) u; Q% ^& O% m
8 s$ h. e+ L  D  z2 U
<head>4 I* Y) i( v- L' e
    <meta charset="UTF-8">/ S+ ?. T: z6 m& D4 w7 g# y
    <meta name="viewport" content="width=device-width, initial-scale=1.0">% a4 M7 K$ z! G% n
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
! r" w  x/ p) A7 S8 Q    <title>Popup Model</title>
' y1 q1 b7 \( a2 h7 x2 }: u- \( d$ W# X" E) n. l( _) K5 O
    <style>$ q7 G9 p9 s* L, i7 g8 q
        /* 弹窗背景 */) `/ O7 b( E9 M9 Q; T; ?0 z
        .model {: [: M" l2 g* A7 j$ a! G  @
            display: none;
* P* w, Q/ d5 \0 F8 y            position: fixed;- O9 |, W2 N! ?/ O
            /* Stay in place */
% t. l5 d5 |( I2 Y            z-index: 1;, }; ~* O" H/ R2 g- i% z; M
            /* Sit on top */! e" ~2 ^( [* q5 c  @4 L
            padding-top: 100px;
+ b+ r- n1 I5 H9 B( ]            /* Location of the box */
- w9 e) @8 j7 U( w: f            left: 0;
; d& Q+ y5 C; N) s  [- d            top: 0;
5 N% I# J% N2 R9 t  h            width: 100%;9 }6 R! F# a8 p
            /* Full width */+ i- o$ }- D- x7 C2 E4 T
            height: 100%;/ f1 g* c+ v, D* T; h
            /* Full height */
  g8 j' D- v6 d; |: u5 g            overflow: auto;
3 {7 L; `/ M# k* {& c0 [            /* Enable scroll if needed */
% k" L. x6 Y2 q( C6 m4 X4 Y) c            background-color: rgb(0, 0, 0);
% ]* l6 p7 S7 }            /* Fallback color */& Z) Q2 k8 _8 ?8 |$ m7 y2 \3 }
            background-color: rgba(0, 0, 0, 0.9);7 M( M: H  K' V4 i$ l& l1 v
            /* Black w/ opacity */
9 U7 V$ P( o- ^$ D/ \& g& M        }
* K1 _) x7 Q" N+ L
; X. H" E9 p& |5 _7 N; l/ m        /* 图片 */. t  R6 l2 Y. {( X  \9 C- D
        .modelContent {8 c5 w2 g0 T: H9 |& ]9 H6 b- d& Y( ]
            margin: auto;; }  c5 [) O5 i. `
            display: block;: f6 G% |2 U4 ]6 l
            width: 80%;
  v, ]( Z* ^- R            max-width: 700px;
$ y! t' Y: }0 x; C5 O: A, D        }9 B, ]$ E6 e+ M4 D, N& M- I$ ~
: [0 q6 q' l  }( y! _, h
        /* 文本内容 */2 M% c+ e! }/ Z
        #caption {
8 D2 P3 K* |5 N6 ?* [& o            margin: auto;
( S& e% G& i7 H1 N4 O! E# M            display: block;
! l$ n3 D2 P. A4 e            width: 80%;
, O8 e6 `0 M" r            max-width: 700px;
$ w6 L8 o$ P2 ?/ m$ U& x            text-align: center;
* U* u: J5 `% h, D; b6 @6 H. B            color: #ccc;+ o) F& d1 {6 d" d0 D' s
            padding: 10px 0;
4 u1 R) F' |( Q* u/ Q            height: 150px;; a5 X6 e* L" b' r2 L% [+ W( b
        }: \' n5 q0 f7 M: @
       /* 添加动画 */
& M4 _8 `7 o5 G+ g) ^, t.modelContent, #caption {  ' U3 G; `1 m$ N$ x7 m
    animation-name: zoom;
5 C9 R: l* }5 j0 \3 N" k    animation-duration: 0.6s;8 @) d" O; s$ q2 E5 Z& h- O0 X) A
    -webkit-animation-name: zoom;# f; z+ A0 l. b/ I; r. Z, ]
    -webkit-animation-duration: 0.6s;
1 M7 t4 D% j& p}- y  _; a$ N& n5 C+ S2 {
! K. g9 F/ i- D
@keyframes zoom {
: u0 \3 r) D0 r7 T( b4 T4 V    from {-webkit-transform:scale(0)}
9 S  Y# M2 U5 @( y( ]    to {-webkit-transform:scale(1)}
! ~4 T$ U7 a" m& i6 s( N' N}
' [. C+ U3 [0 e7 ~
+ ]6 F- ~# E6 \. l        #myImg {; R, d) _# B/ O/ x
            border-radius: 5px;, m. Q  g6 q: }
            cursor: pointer;
7 A- v" o" k. I  F' Y9 X            transition: 0.3s;5 c( R) p& m/ i8 g2 l4 m
        }
0 l- q# a  ?' Z, C) U) X" J0 x
+ [, l5 B5 z6 y! M. d+ `        #myImg:hover {
' j& I( i; V$ r4 ~" Z6 ~0 P            opacity: 0.7;
9 i5 a$ ]* e! i) D2 Q3 s3 h        }/ P. v0 H% @4 M. }: w) E

  f( q5 b  ^- D8 T8 k' I5 M; Z        /* 关闭按钮 */, I) d7 g) g0 {$ Y2 u1 Q. r8 Y% V
        .close {
# n+ u' E5 f1 j! p* A            position: absolute;; q2 n  Q% M& _; x- A. N7 t) @! f
            top: 15px;
! E- a8 }; o9 t# c9 F  E( u, g8 H            right: 35px;
  P: d" V( ]" X" D            color: #f1f1f1;
  [& p5 q0 d# Q            font-size: 40px;! b  ^, e0 b7 Q7 M  C
            font-weight: bold;* Z, T3 {+ d2 k6 l0 {
            transition: 0.3s;
0 e$ f$ w, @# h5 z        }
3 t2 S; P6 M' R1 `7 t( r) o. L% i4 h& F
        .close:hover,5 F; r) ]- `5 D& u3 [$ b3 N5 {
        .close:focus {& y0 Q6 R/ z7 m! X
            color: #bbb;3 Q# r& ^1 z+ C$ T; C; V
            cursor: pointer;& x; p5 a3 P, W" }' w% U5 A/ H" _; s
            text-decoration: none;
# Y6 K( `: G: X        }; @. Q3 B. O' X6 \5 f, _$ m
    </style>
* W4 ]- |% z$ v+ b</head>+ w( G$ \: {" k& s$ r

5 |) Z) {( Z5 B<body>$ A; F7 U* n& s" e/ ~: L: V

6 L, ^2 l- r- M5 c    <img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">
! p6 V" ^  i1 X1 q$ {& A4 B& n
7 |6 |, F- G  w. I- |% |; D8 a2 j; F# T7 E2 ^/ Y6 p
    <div id="model" class="model">
. _  J) v6 u( \- |8 |, {6 F( D" `2 a' }9 a- I
' E( ]) Q  h7 V% p
        <span class="close">× </span>
' H5 H- w" _. p
# S. @: l& l5 [        <img id='img01' class="modelContent">
" J, ~- c) ^- U( c. w6 [$ g9 F" ~8 B1 y0 C: ~/ _' l& h, a
        <div id="caption"></div>+ s% r, F( F+ A
9 ^# q  I! R; J; s* Y. n

$ R2 D6 y- P% `- }; M& k2 }    </div>
" e) v0 u" ?' f/ N
1 m' A. O* ~% O/ [" Q2 p
( ^) E& s. q8 s: u% e
: l: W5 F( r  Q0 w, ^    <script>
+ O) \& a4 V  S' P! f( r
  T/ x/ r2 \% B$ S        var imgx = document.getElementById('myImg');6 ~/ B! P( I  g% R
        var modelx = document.getElementById('model');
2 Q& P& \8 l) [+ a        var modelcontentx = document.getElementById('img01');; |2 [0 {, l# h
        var captioNX = document.getElementById('caption');( R$ ]! ?) @0 g* ^8 V& p6 o

) `7 F7 \( B! p7 m5 f        imgx.onclick = function () {
/ T2 e" A/ O" E+ Y6 j* u            modelx.style.display = "block";
, r6 S- X( m6 E5 U% w$ @9 I' `. k            modelcontentx.src = this.src;
3 I6 {; x4 D3 r# L+ w9 w* Y            captionx.innerHTML = this.alt;4 a' i* P. F7 x3 J2 N

. R  l9 A7 m: ^" P        }/ k% D" d% r$ y( p$ ], C  A

  c( m% |% J4 }/ p! e% r
/ a; d: M2 X0 G6 W( n2 O    </script>) m. [) z1 G9 Q4 t- g4 w
. F& i; ]( Z' Z, S

4 Q. a3 H1 K  e; V0 P9 B  o/ h% S( _$ h& U
* M7 h$ T* D1 Q) ?1 H# c) n
</body>/ G4 |' X0 C1 W/ E5 W

$ D- k% W* q% V0 Q3 H9 Q" J</html>[/mw_shl_code]* ?- X) t. R9 A) }; {) u8 L
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了