PLM之家精品课程培训

联系电话：18301858168 | QQ咨询：939801026

NX二次开发培训

UFUN/NXOpen C++和实战案例

适合初级入门或想深入了解二次开发的工程师，本培训结合ufun，NXOpen C++，大量的实例及官方内部的开发技术。

关注公众号

点击扫描二维码免费在线高清教程

课程详情

Catia二次开发培训

市场需求大，掌握核心技术前景广阔

Catia二次开发的市场需求大，人才稀缺。掌握开发技能潜力巨大，随着经验积累将在汽车、航空等领域有所作为。

在线原创B站视频

点击关注工业软件传道士主页

课程详情

Teamcenter培训

全方位培训，从基础应用到高级开发全覆盖

涵盖用户应用基础培训、管理员基础培训、管理员高级培训及二次开发培训等全方位内容，由多年经验讲师打造。

加入同行交流

点击扫描二维码加入QQ群

课程详情

PLM之家plmhome公众号

课程涵盖: PLM之家所有原创视频

关注B站视频

所有高清视频一览无余，全部在线播放学习

加入PLM之家QQ群

热图推荐

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

[复制链接]

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

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

admin 楼主

2019-11-7 16:55:28

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

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

点击图片方法JS动画效果

[mw_shl_code=html,true]<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Popup Model</title>

<style>
      /* 弹窗背景 */
      .model {
         display: none;
         position: fixed;
         /* Stay in place */
         z-index: 1;
         /* Sit on top */
         padding-top: 100px;
         /* Location of the box */
         left: 0;
         top: 0;
         width: 100%;
         /* Full width */
         height: 100%;
         /* Full height */
         overflow: auto;
         /* Enable scroll if needed */
         background-color: rgb(0, 0, 0);
         /* Fallback color */
         background-color: rgba(0, 0, 0, 0.9);
         /* Black w/ opacity */
      }

      /* 图片 */
      .modelContent {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
      }

      /* 文本内容 */
      #caption {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
         text-align: center;
         color: #ccc;
         padding: 10px 0;
         height: 150px;
      }
   /* 添加动画 */
.modelContent, #caption {
animation-name: zoom;
animation-duration: 0.6s;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
}

@keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}

      #myImg {
         border-radius: 5px;
         cursor: pointer;
         transition: 0.3s;
      }

      #myImg:hover {
         opacity: 0.7;
      }

      /* 关闭按钮 */
      .close {
         position: absolute;
         top: 15px;
         right: 35px;
         color: #f1f1f1;
         font-size: 40px;
         font-weight: bold;
         transition: 0.3s;
      }

      .close:hover,
      .close:focus {
         color: #bbb;
         cursor: pointer;
         text-decoration: none;
      }
</style>
</head>

<body>

<img src="./img/Logo.png" alt="This is a logo" id="myImg" width="300" height="200" alt="This is a test ">

<div id="model" class="model">

      <span class="close">× </span>

      <img id='img01' class="modelContent">

      <div id="caption"></div>

</div>

<script>

      var imgx = document.getElementById('myImg');
      var modelx = document.getElementById('model');
      var modelcontentx = document.getElementById('img01');
      var captioNX = document.getElementById('caption');

      imgx.onclick = function () {
         modelx.style.display = "block";
         modelcontentx.src = this.src;
         captionx.innerHTML = this.alt;

      }

</script>

</body>

</html>[/mw_shl_code]

上海点团信息科技有限公司，承接UG NX，CATIA，CREO，Solidworks 等CAx软件，Teamcenter，3D Experience等PLM软件，工业4.0数字化软件的实施\二次开发\培训相关业务，详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech

使用道具举报

返回列表发布主题

PLM之家精品课程培训

NX二次开发培训

关注公众号

Catia二次开发培训

在线原创B站视频

Teamcenter培训

加入同行交流

PLM之家plmhome公众号

关注B站视频

加入PLM之家QQ群

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

热图推荐

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

admin 楼主

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

发表回复