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

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

[复制链接]

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

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

admin 楼主

2019-11-7 16:55:28

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

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

x
6 n3 O' }7 x. J1 I
点击图片方法JS动画效果
  m, o6 X8 L: s0 {7 [) a3 E& t( }& z% {0 M1 j
[mw_shl_code=html,true]<html lang="en">2 _& m0 p0 c1 i
' r9 v2 f( ^$ o  h
<head>6 {) `4 O+ T  }
    <meta charset="UTF-8">. E5 ^: d- w2 S. }) ~" I
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
; ~6 M% _: O( W" V& b& K8 [    <meta http-equiv="X-UA-Compatible" content="ie=edge">
: |& l% W! W/ C3 Y" g    <title>Popup Model</title>
+ Z$ R( u- _1 T
1 X' D" E0 y9 m    <style>
( E' w( X$ w- s' b3 J$ h) p        /* 弹窗背景 */
/ t" I! P" N2 r% B  x4 P$ a5 O        .model {' S8 ?$ C  f1 i. Q
            display: none;# b9 h/ I: u5 P( I* ?8 P
            position: fixed;
, }: ^" L& q  h* E( I9 P/ U            /* Stay in place */
0 C- G$ w# ~3 i5 I            z-index: 1;
/ v1 P' m' e7 b8 r9 k9 [$ `) O, u9 l3 n0 X            /* Sit on top */& E  i# J" P! b: Q3 `! P
            padding-top: 100px;, T3 ]& K7 S( _3 B& ~/ L: t2 i; o: _
            /* Location of the box */
/ C1 s# S/ q* f2 E( K            left: 0;
$ w% \8 T6 L# Q% s& I            top: 0;
) c9 r6 m7 R: A, W            width: 100%;
0 U, u/ W7 s3 C; G            /* Full width */8 g. S0 _4 i% u! c
            height: 100%;
! l( Q, X' w( m& o# k) w: I# \; e            /* Full height */
3 o2 |2 E% z, t6 I            overflow: auto;) O1 k0 t+ r6 z7 t. i
            /* Enable scroll if needed */8 V4 ~3 Z$ ?6 U4 y
            background-color: rgb(0, 0, 0);# g" I* A+ J  d
            /* Fallback color */
3 V8 Y: X9 e; _6 j3 Z5 O            background-color: rgba(0, 0, 0, 0.9);$ D0 N5 H: P. W
            /* Black w/ opacity */
0 I  e- K' Z/ Y) A        }
7 H0 G; H6 Z  h9 v% ^$ W% T8 y' F" a3 G$ L0 X9 a5 F/ ^
        /* 图片 */
. }' S# j5 F1 y* S) c        .modelContent {
# }1 M7 c9 ]* b( y; ~+ J            margin: auto;$ I, _7 i1 P6 Q4 O! d4 v
            display: block;4 K3 G! W1 j3 L
            width: 80%;4 f5 o4 w0 E" _. p
            max-width: 700px;
* g" c2 J2 p8 W) B5 ^; b        }/ U- [# p' Q4 N, ?
( v7 S; q) f8 M
        /* 文本内容 */
2 @4 p. F1 C6 r. v        #caption {/ K9 o- v6 B" T4 E
            margin: auto;( y6 ]! Q- ?; z3 G8 E7 ?5 B
            display: block;5 z$ ], _2 V( z) }: {
            width: 80%;# u6 H7 {+ U6 t$ j
            max-width: 700px;2 [& \/ y" H, s5 t
            text-align: center;
. {6 k9 X2 E% J- b            color: #ccc;
: ~* ~% k# j3 c  g6 S) y            padding: 10px 0;" g) c+ o$ d+ r6 P( k
            height: 150px;- @* B  I/ H% `3 G5 F2 u3 A
        }) L) V5 B2 P0 e" K5 `* p
       /* 添加动画 */
5 i9 S+ R# K' ~: f.modelContent, #caption {  
% `# v  o5 J& r( l! Z0 o! C2 l    animation-name: zoom;
# }& d& K3 L, v% d    animation-duration: 0.6s;
; i) V% Y! u, F8 X: w1 s* v4 V! U    -webkit-animation-name: zoom;* @# S$ s1 ]. G; u3 |8 S. G) Q
    -webkit-animation-duration: 0.6s;' K  N2 @. T" z. k
}% W- s1 l' h) x& E; J" a. B8 Z

3 q1 U9 H6 J1 U0 [) V" N) A4 j@keyframes zoom {) Q6 \1 k% h/ f4 F0 T
    from {-webkit-transform:scale(0)} $ N0 J6 A1 O& k. ?! A3 i
    to {-webkit-transform:scale(1)}3 @& L  k1 j) H; h& t
}% j9 C- i. R# l
+ n: q: c8 f6 h3 T" t% n
        #myImg {5 S# _/ I6 h: S; a- h
            border-radius: 5px;
& {+ S+ a5 u: E8 f4 p# j7 N' I* i            cursor: pointer;
' q, w( z! |+ W) w1 b            transition: 0.3s;
' z5 r9 j! X- E" p% J        }* `/ i% w/ f- d* E" E9 \% U0 x

3 w% q$ M6 ]* O6 O3 K, o0 f& A1 Q9 u        #myImg:hover {. g6 n1 X, F: n9 y
            opacity: 0.7;
9 E7 n4 O( ], ~: ?0 t        }
& `- L1 q" n4 h) [6 P1 z7 J$ @; g/ p) ~9 A4 x
        /* 关闭按钮 */+ r* b7 y, O; \( o' ?0 F
        .close {1 B7 K; V+ E, }: y4 q! Q
            position: absolute;
  w$ v; E. V* X! v- j- Z            top: 15px;/ A+ G4 A; P) X# k6 w0 V
            right: 35px;! I+ M( S1 [/ {! v
            color: #f1f1f1;/ v# p8 z& s# @' ~
            font-size: 40px;: S- ?: R9 }! S' C- K) o
            font-weight: bold;- L0 k  q' R( ?9 d3 N: K4 p, O1 D! R# S
            transition: 0.3s;8 d$ G: S* v7 K$ `" W
        }" B$ ], g0 F0 P- p1 o- B

  j% U2 |+ y/ q2 F3 d0 m% `        .close:hover,
8 |3 \& }+ ]! v+ p        .close:focus {
# Q: Z2 x) a$ z! r            color: #bbb;
( u5 [& G4 B1 e$ ]2 D% v            cursor: pointer;
( E& r& N$ a' i4 G            text-decoration: none;" m. b. H4 q# {& B
        }+ b6 H. {% [1 c; f2 u9 r
    </style>
* z& ~4 D$ q" E" u* w</head>
5 `* k* R- X3 F! I$ r3 r5 D; {7 `; Q' u- e9 w6 p& i, K) {
<body>) V, f" n4 k& J- J+ ~5 D* H/ L9 `! i
! t8 v; ^2 b' c
    <img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">' Q1 W5 \. w" S7 m2 L7 q2 `
% z! i6 M$ J9 \! x9 W/ E

$ g6 }! C5 h( y    <div id="model" class="model">1 q( W: W2 q! `; C* J" j
4 K5 G. @# e' F, G8 [

" p7 R. ^' T9 h( e$ a        <span class="close">× </span>. M( Y1 d+ [6 j

# i. G' g# c# u5 r        <img id='img01' class="modelContent">
( t5 {5 E1 [) k9 j  e& L$ f( B) w( g: g! c
        <div id="caption"></div>* u0 X9 u4 ~& i5 c6 f& J

4 K: f% [4 c% N8 M$ Z; O, o6 @0 g+ ~( p& G+ _
    </div>; ~' s( j3 t# f' s9 U5 d
9 j6 T8 }- Z) J

+ y7 Z% T6 c, c- I% v) `& T5 i# `* F4 x( i
    <script>$ T; V: t* U: `% ~# L
; h( w2 g# i& ~: u3 R% \3 O
        var imgx = document.getElementById('myImg');! S; F* {! I3 D7 }+ v3 v
        var modelx = document.getElementById('model');
5 Y6 k: g6 q5 @/ b        var modelcontentx = document.getElementById('img01');
: z- o/ H6 S* J5 j0 }6 }2 q  ]        var captioNX = document.getElementById('caption');/ h8 o  d7 B; f

, k4 _) d, r# V        imgx.onclick = function () {
+ ]- t5 g+ S; ^6 O1 m            modelx.style.display = "block";
0 u  @% p: L0 h            modelcontentx.src = this.src;
& v6 f" O3 Q, K# e2 E# h( Z8 l, P            captionx.innerHTML = this.alt;& t* t( ^# o1 C3 A+ m/ ~6 L$ q
, r' e$ R6 U' e& `( K4 e
        }* P+ U& l3 K/ x2 d. `

" y4 W) [; |, R. [9 e3 W, d) }. t" b5 @4 C1 u: P
    </script>* z* d6 e& N$ ^! ^6 [4 Y' b
+ }5 E7 H! y6 o* f" Z

2 A9 [) v5 @" r. Y% [
1 s) i" }$ K' Z- g
+ t  Q+ V. L0 _</body>7 V: h& n$ O6 \# v

# X% c$ w% X& |& T</html>[/mw_shl_code]
/ r; e+ [9 V) h
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了