点击图片方法JS动画效果

admin · 发表于 2019-11-7 16:55:28

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

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

x

点击图片方法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]

PLM之家PLMHome-工业软件与AI结合践行者

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块