PLM之家精品课程培训,联系电话:18301858168 QQ: 939801026

  • NX二次开培训

    NX二次开培训

    适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术对于老鸟也值得借鉴!.

    NX CAM二次开发培训报名 NX二次开发基础培训报名
  • PLM之家Catia CAA二次开发培训

    Catia二次开发培训

    Catia二次开发的市场大,这方面开发人才少,难度大。所以只要你掌握了开发,那么潜力巨大,随着时间的积累,你必将有所用武之地!

  • PLM之Teamcenter最佳学习方案

    Teamcenter培训

    用户应用基础培训,管理员基础培训,管理员高级培训,二次开发培训应有尽有,只要你感兴趣肯学习,专业多年经验大师级打造!

  • PLM之Tecnomatix制造领域培训

    Tecnomatix培训

    想了解制造领域数字化吗?想了解工厂,生产线设计吗?数字化双胞胎,工业4.0吗?我们的课程虚位以待!

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

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

[复制链接]

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

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

admin 楼主

2019-11-7 16:55:28

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

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

x
9 i7 O6 H- _! w( l$ `2 [# |/ B
点击图片方法JS动画效果
! ?0 z. n' u1 n; V' O
9 A! |' O( ^% X3 N; a( C: |8 J[mw_shl_code=html,true]<html lang="en">/ |/ V1 i- t2 a4 e5 B
6 d. S! f7 c% }5 G: ^3 @9 p+ j# h
<head>
, R) R% N2 p# H+ c/ V- _* S    <meta charset="UTF-8">" Q: i6 C: {+ _0 ?; i# @* m
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9 a4 g4 |7 S7 Q( a$ L5 A0 t' G) \    <meta http-equiv="X-UA-Compatible" content="ie=edge">9 r7 H* N; h( G( u" c/ Z" G- d
    <title>Popup Model</title>
  }. N/ j; B# e
5 P* v4 k$ z9 G+ R5 k    <style>
2 g' T5 ?  G( N1 e        /* 弹窗背景 */
9 X: B6 @! i* A        .model {; P) _7 s0 \# h9 a! m. `; Z: e( k
            display: none;
, ?# B6 f0 a4 B            position: fixed;
7 ~0 X5 Y4 a  O% N            /* Stay in place */! j. N, U+ Q. p- N  [- h
            z-index: 1;
- G5 ~. l5 k! o            /* Sit on top */
& i6 \7 v7 ]5 ^& @  _            padding-top: 100px;
3 l( a5 f; k9 I2 q  x            /* Location of the box */
4 e( F+ T: h* M6 W6 `( G            left: 0;4 J% R- S/ Z( J; T" |$ o
            top: 0;% Z7 y. S' J! K  D" q. @; ^  x! t
            width: 100%;
( r' M8 Y8 A; {; k& A/ L& n            /* Full width */
% T6 X5 ?8 j, O            height: 100%;, j9 o; U% Z1 M
            /* Full height */  ?8 R4 ?: s3 G9 m5 N
            overflow: auto;, b! q: I9 V0 s3 T# H
            /* Enable scroll if needed */3 a! W6 V' f5 v* t2 ?) @
            background-color: rgb(0, 0, 0);" y2 b1 ^  W: e, V5 H% i
            /* Fallback color */
$ ], B8 t. b+ k! q; @( e( x) l8 q1 [            background-color: rgba(0, 0, 0, 0.9);" S4 K0 H. c' r1 L: z1 j
            /* Black w/ opacity */
1 v5 c8 t; d; b& z; }( T        }
. }7 v2 n7 i: j; m7 E. c
% b8 E+ S1 y2 B6 z( d) n# i        /* 图片 */! ?* E# ]' ]: `+ A8 D. A
        .modelContent {
/ D8 J' O) I4 q- H5 ~" j  B            margin: auto;
7 C" \& Y! O4 Q2 d5 S            display: block;9 j* g) j4 W4 Q& A  `# Y& y
            width: 80%;
6 v  h/ q$ O2 D5 p3 j% |3 V            max-width: 700px;
4 R  C7 c6 X# L( P& m        }8 U9 w& f+ A" t

6 f) T9 Q9 f( r# {4 Z& Z! \) G( d        /* 文本内容 */+ ^9 @4 @9 P% Q9 L
        #caption {
$ b# U: Q3 T  N# l  t, V6 J            margin: auto;
! M0 S' H% S$ B5 G; }2 b5 d            display: block;
4 N- B* x, ]8 Y6 o! Y: X& {9 \: z            width: 80%;
7 L5 k: C% [9 {/ F: c' E. _            max-width: 700px;* L( w7 |3 g% @8 c2 K
            text-align: center;
+ _- n/ k6 n5 I5 J8 ]            color: #ccc;
8 D+ H: m- t8 [. n4 s1 B: `7 F% U            padding: 10px 0;
0 m, @" W' {4 E% c! ?            height: 150px;
5 Y# W' }. L& B& \  i6 U        }
1 |2 D$ T  K% ]       /* 添加动画 */
) Y0 f2 v( A$ p/ J- g, n.modelContent, #caption {  3 H% w0 `: }7 r. y- |; A( H
    animation-name: zoom;+ m- O0 e6 f( Q$ c
    animation-duration: 0.6s;
7 [$ u) N" x1 n1 Z$ \+ K( o) R2 ~! o    -webkit-animation-name: zoom;: K8 o& s3 A5 ~- g$ t
    -webkit-animation-duration: 0.6s;9 Y- i- B! V: Y4 k2 R1 C2 H: h
}- W% e! a4 N# z" M0 J
2 Y3 n$ y; U7 T9 S& t# f
@keyframes zoom {
) U! Q! z$ X6 A  @" D    from {-webkit-transform:scale(0)}
2 C; G3 ?& p0 p" X4 `, k    to {-webkit-transform:scale(1)}: N( e4 ~: i& l1 V1 ~* l, L
}
+ |' W4 w" _* E% e5 D) @0 D( S; F7 R3 q) W  t
        #myImg {. G4 M% r& `2 K, A5 n5 y/ m
            border-radius: 5px;. K+ C6 Z6 I1 W1 L' ^) ~( D
            cursor: pointer;! P; e5 N) y: c- ]8 o) C
            transition: 0.3s;  u* U! {0 N1 k( p! A
        }
/ {( b$ x$ g0 u4 H$ m* M2 {2 ]
+ ^# C* n8 P+ }  \/ R        #myImg:hover {
3 ^) S% A# j$ Z+ J" ?            opacity: 0.7;! {' L! F* b: q7 H4 R" h; Z+ [
        }7 t5 `1 ^: V6 p+ j# |% h
" @4 S; @  N! X) ]+ c" Y. x
        /* 关闭按钮 */4 j, f/ v0 p7 j- J/ n
        .close {! J, I- \+ b6 G( R
            position: absolute;
) @4 i* s0 s' o) U( u9 a* _+ B            top: 15px;$ x3 G5 ]6 B1 {5 ^, V$ a
            right: 35px;
' _' V9 u% L  F2 p$ g            color: #f1f1f1;) r# n  T" l0 B, T1 `% ?- o
            font-size: 40px;
, M& ^8 F& g, e. X8 r; R$ T& Y            font-weight: bold;
( }, n8 [' A7 J$ [. k$ ]# q( ~            transition: 0.3s;
% D$ W4 T8 |: Y        }7 q8 N7 ~0 D! [( V) ^0 h

) b& z0 g3 I+ T, p        .close:hover,; f+ }+ Q* o2 t; L$ l/ p
        .close:focus {6 ]" T/ _( q& {6 d
            color: #bbb;
$ z% S& Q( p  P* n& }1 w) x            cursor: pointer;
6 Q+ a$ _3 N0 ^* R            text-decoration: none;
( S& V$ r# [: T        }1 A* `& @  ~0 M% Q
    </style>/ W' V0 |/ o; P
</head>
) }6 x3 c" p, E8 F8 C* k$ _) N1 h* u! z, \/ p" x, \
<body>
, D6 ]5 M1 x5 X; u  }. f3 [# z3 P5 y" n7 O9 [0 z$ m* I" u
    <img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">/ S8 a4 w. {' y- D; R5 {' e

% V$ P8 a1 O5 j. E5 `5 L; g  q% |2 a. Z0 F  G
    <div id="model" class="model">
8 @0 [5 Q* B! I3 p7 h# }$ q/ P
' z+ a# C5 t! c/ x( ?
2 p7 `+ @) B* D, v) ]        <span class="close">× </span>
  ~4 w- [: l! o3 x7 j' G7 u/ }. l! R. |* t' A! m- r
        <img id='img01' class="modelContent">
  d. Q% o" g# T4 @, t4 f: V) E! l( d3 |
        <div id="caption"></div>- {$ m: P2 l: B8 |: N' ~

& ?' [% e7 J7 ~9 O1 T- ?$ J8 R7 l* q, {2 h% ?% t
    </div>% T' j3 S+ m; G0 e& H: C. V4 w
7 d& ^7 P. v; _- x
. R( h, s& v3 n5 |9 ?% ^. L
/ L# w& g7 I- Q! U
    <script>5 |( s* x, @7 \* U& `

# F6 d( @/ L6 t0 R( ]. C        var imgx = document.getElementById('myImg');
4 K% |9 K2 G+ ]0 V" a+ v  G" D2 J        var modelx = document.getElementById('model');& s% z( b% j3 D) `8 S- d- b
        var modelcontentx = document.getElementById('img01');
9 z! H1 H* I% u0 |( l5 W/ c+ a        var captioNX = document.getElementById('caption');. a" m. F" h; i8 E) f* B
! B: h/ z/ |+ }+ i/ Z5 V  Z7 w5 o9 q. O
        imgx.onclick = function () {
* X4 b% D: _5 @            modelx.style.display = "block";! w& J  K2 z7 Y+ m1 O7 y3 K
            modelcontentx.src = this.src;8 y7 I; C2 {  B- w
            captionx.innerHTML = this.alt;
5 v6 N  a( M! F' D$ J, E' E
9 O" C- ^1 N: F! @- O. B. r) b        }
0 v$ k3 U) \5 F' u0 C: }, |) H6 b& l2 e" ~7 ]
& N- d' G* E! e! o; X9 n5 M3 D3 Z
    </script>- ]% j4 d5 p5 N8 A

. V5 t! k$ C. D+ g2 v4 J) f2 h+ v' r8 H! N' Z

9 m2 V6 e) m: y  v: n: u* ?2 [+ c
2 V' A9 q$ Y2 Q/ w7 L- }" Y</body>
) R( U9 a! W2 F5 t9 [" H1 F0 k9 i- O0 X! }- Z. |
</html>[/mw_shl_code]
/ }; U  ~6 A1 l( x  {! Y$ U( X
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

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

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

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

    我知道了