关闭按钮和动画效果随页面一起加载,而不是单击时加载

时间:2018-12-12 12:24:06

标签: jquery html css

**关闭带有页面的按钮,而不是使用模式元素的按钮 ** 用页面而不是图像加载动画效果,而不选择图像就加载第一个效果

$(document).ready(function(){
  $('.button').on('click', function(){
    var target = $(this).attr('rel');
    $("."+target).show().siblings("div").hide();
  });
});

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
.closebtn {
  color: white;
  float: right;
  font-size: 43px;
  font-weight: bold;
  position: relative;
  top: -78px;
  right: 219px;
  z-index: 1;
}

.pulse {
  animation: pulse 4s ;
  margin: 0 auto;
  display: table;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}


**js script for the button and close , image  **
<div class="container pulse">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" class="popupimg_style ">
  <div id="imgtext"></div>
</div>

0 个答案:

没有答案