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 1787 0

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

admin 楼主

2019-11-7 16:55:28

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

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

x
7 q( I$ R/ U0 P/ ]
点击图片方法JS动画效果
/ u! i, s+ q/ |/ l' Q( }
0 P  ~" Z. Z1 E, X0 N5 C* a, C8 {[mw_shl_code=html,true]<html lang="en">3 a) f# j& n& t8 ]$ `4 q/ P

0 E+ c6 ~! d7 S! j, E. J. c+ I<head>* H( n% D- q, U$ e8 v  h$ p
    <meta charset="UTF-8">
$ x! J1 O1 K2 x0 D    <meta name="viewport" content="width=device-width, initial-scale=1.0">7 _" v8 v" T1 E. F, J
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  d5 D/ r9 ^7 J9 Q( Z6 [
    <title>Popup Model</title>
9 d4 t4 d7 y5 U# U  A9 B0 Y  v) j5 j( g/ e& {
    <style>- e5 H: S! P0 S4 V! g5 R
        /* 弹窗背景 */; V  i7 g& h* D- ~# x. i
        .model {
: N: @3 h  S, a# |            display: none;
# j2 h6 _( C  f6 z2 I: b9 o2 O            position: fixed;
4 {: |, Y* _5 N( b) S$ R: P3 H            /* Stay in place */! [4 ?1 V5 ^2 r, L: d+ g4 L3 l  `
            z-index: 1;
0 o% r. y$ d6 R  k9 ~3 I* ~            /* Sit on top */, L- s0 c/ D3 [) i
            padding-top: 100px;- y% ^( L4 p+ i5 X% R& y- F- B1 k
            /* Location of the box */
9 A: x4 t- c3 c9 K; R$ @            left: 0;
3 h6 N, m" R  b* e5 W$ @; x* b9 }3 X            top: 0;  ?# a8 C# j0 l0 O) L, R, }9 c  I" X
            width: 100%;
6 o( I- p$ H2 f0 B            /* Full width */8 W, a( ]3 l  k+ M: v9 C8 k5 s
            height: 100%;
8 ?  g  `4 O# w( n, G% A) w            /* Full height */
) G0 {5 @$ i2 B0 ^            overflow: auto;
8 ?/ Z2 F1 _( [5 ]            /* Enable scroll if needed */' Y1 t! y% H' R5 \' ]
            background-color: rgb(0, 0, 0);
4 `1 f  E2 l! G' o8 ?            /* Fallback color */
: C$ s* \) B0 G3 P& ~            background-color: rgba(0, 0, 0, 0.9);! A: L, |* d# _: b7 M
            /* Black w/ opacity */
, c  g1 j  @5 i: A, k: {' G        }
! f( \9 n3 Q; u! R7 M7 Q& t& L2 q. }
        /* 图片 */5 o6 H8 y# Y8 q8 w2 f/ j6 n
        .modelContent {
" i7 z/ d) o5 n' C) m            margin: auto;: d2 d& J7 W) h4 G! U8 f+ Q
            display: block;
% V# ?  H2 O. v, K- \9 X! H' U            width: 80%;6 b) K* e' Q# c' l7 r4 P/ w3 g
            max-width: 700px;# K3 }7 O( e# }$ {: A
        }3 }2 Y0 C& e0 Z! G
6 a1 ~1 e, U/ P$ S" K
        /* 文本内容 */
# l% x9 _+ D0 d8 `% l/ T0 I2 j        #caption {' Y( F2 q1 z3 {5 ^# ?) S
            margin: auto;
' d; ]3 K2 t& h/ L, \& @4 M            display: block;
8 i  q$ e: v1 |, Y9 n6 q3 z- w3 Y            width: 80%;9 }6 Q7 d) H' @$ Z
            max-width: 700px;
& c% b8 J( _0 R. Q3 E- P& `            text-align: center;: v/ w& P0 M$ \" B8 R
            color: #ccc;3 p  T4 U- n1 @3 U4 ^
            padding: 10px 0;
4 Y0 |/ R$ z. G9 ~            height: 150px;, x2 @5 \, P7 C
        }& X5 v2 D+ ]6 o$ T/ O
       /* 添加动画 */
) O4 N# e4 }# l" S! }# U.modelContent, #caption {  
# A. i+ i& O: E3 G9 x) P    animation-name: zoom;
/ O  i: H0 {- |) @8 }6 K3 z1 G    animation-duration: 0.6s;1 w$ D8 D& f9 y4 d: e
    -webkit-animation-name: zoom;
! K4 \8 I0 y$ e! y    -webkit-animation-duration: 0.6s;
4 K- G+ I7 Q* j4 `8 l- L}
- p0 \1 n, i7 k: W+ N% F5 ^5 E/ G" S4 ]% \! L! {8 M( q% r
@keyframes zoom {0 F8 e1 T7 T3 O9 O1 q0 u
    from {-webkit-transform:scale(0)}
# |" W: y3 c- Y- q  v    to {-webkit-transform:scale(1)}
: s) l9 e5 k3 X/ S9 ~5 A/ b! Z/ D}
  P6 L6 G: B: x9 N6 W6 @) w! ^% P& U$ x2 V- R% e
        #myImg {
) z1 u7 Z6 ]* |8 T. I6 q" P1 W            border-radius: 5px;
- Q: \% ]/ i! |4 `            cursor: pointer;$ M) y# Z: C5 I! D- n3 x
            transition: 0.3s;' Z2 z. y' ?  f7 ]% E9 Q; q" s. E1 n; I
        }/ N8 E/ J5 @8 o9 r( }4 z3 s8 B
& ]% X- {8 \% C1 Q+ b) @: D/ u
        #myImg:hover {3 }- L" w9 Z4 i
            opacity: 0.7;
$ P4 E& L4 `& K6 O9 F: z* U        }) X' H0 X" j' n; i. x* ^
4 s0 i( W. c  l. o; y1 [
        /* 关闭按钮 */
. b  F9 D$ n8 H+ B, D+ K        .close {: \; j2 D/ y5 H6 x' t' ^
            position: absolute;& A# k% A3 u5 z3 i2 l5 H
            top: 15px;( P) p3 q/ s$ j- o/ V( I1 n7 y
            right: 35px;) z; c  v& |5 d- ]* l6 e$ o/ u
            color: #f1f1f1;
! T8 i- |; _3 R! X6 a1 k/ u7 `            font-size: 40px;
, n8 J* M7 N: S            font-weight: bold;( t9 S" H) K& q9 ?+ [
            transition: 0.3s;
/ i. P$ h2 ?* t+ U: H. P- Z* _* S        }
! ?- r* Z/ D+ R( J( x9 [" \/ X
5 ~( i! a* o1 G4 N, C) ?$ W& S- a% O" I        .close:hover,
1 @) y' k# K- l        .close:focus {0 H! Q7 g/ W/ Y8 w2 n4 [
            color: #bbb;
( e3 T3 K; W3 [, D) z- T- ]8 Q, x7 i/ M            cursor: pointer;
2 G8 J* E) W6 V9 a5 r- f, B            text-decoration: none;
: W6 q) _( s8 a3 D        }
0 U2 M: _0 l5 q0 N  ?    </style>  H" t6 g: P- M+ U5 Z
</head>$ ?9 M$ T( E4 ~" @0 |8 \0 {/ V
2 y7 q; _6 m4 @+ l/ r, \* w
<body>
8 J+ _3 B  K# p# Q2 K
7 t, Y) f2 f- `" v+ E# d/ e    <img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">/ d5 \1 q0 b$ |+ J

' s5 s0 b& X& I, F7 F6 `* r0 P3 |8 D8 A
    <div id="model" class="model">6 Z0 v. x5 `7 v1 X; c  c
) h& J9 x2 q* J/ c& \" }* K- n
/ J  a7 w7 Y5 d! A
        <span class="close">× </span>. c! _. k% H9 Q/ h$ s

. Z! Y! y2 e6 Y! A" j$ _( r        <img id='img01' class="modelContent">  X* G6 W# j1 _: r

8 \* T4 G+ C5 @8 d        <div id="caption"></div>/ X$ t9 }& e: T9 N, [: F4 r6 y! H
/ j7 N3 Y: @7 r6 c+ h" H! j3 N

. g0 q5 f+ t* S5 D! U. j" P# d4 y1 n# x) b5 j    </div>
* L0 ~$ x( W3 e- a1 ]
( l  e3 Q7 q8 ^+ [# c/ Z# [* H0 w# w: |+ N$ F

0 T! p5 c0 n) i6 F- q2 ^    <script>
+ V7 }' D  S& r) T; D* x( `
: n) J; }0 H$ O" U  Q" b# {; t/ x        var imgx = document.getElementById('myImg');  G2 c+ r4 i8 {7 W9 |9 e2 u8 Q
        var modelx = document.getElementById('model');
7 T4 |* i' B* l( s* L* O' D, d        var modelcontentx = document.getElementById('img01');
. K9 R  j# p3 Z- K: d' b5 h        var captioNX = document.getElementById('caption');' y' C( X- ~8 p1 {9 g
! }; H! Q* q5 K0 v- o
        imgx.onclick = function () {
1 y" m$ K7 r3 v0 ^$ v+ @            modelx.style.display = "block";
6 ~/ }$ N1 l# K' M% m            modelcontentx.src = this.src;
. r. j) b# j7 @, A1 l            captionx.innerHTML = this.alt;
# E2 d( E  R7 j$ a3 o5 v% Q
9 c& D4 y2 i. n( R1 c        }5 c6 g# E- |4 }# }5 z

& u! z. ]% S4 ~! Q: p( [8 C) M$ d5 ?7 L8 h1 A; {  m7 n( `1 z
    </script>
9 d% i3 i+ c1 j0 n& i8 x5 t8 l$ y) m8 W* t5 g

9 V+ x' C' ]. n  U: c
3 W5 ~8 E; h) n. h& v- D  {
9 V' _1 h/ e, e</body>& G) r5 o0 n& O% o. C2 w
& P5 R' r5 O0 i$ E
</html>[/mw_shl_code]. h6 I' T: t% y, U' m) D- s; U
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了