CSS3全屏手风琴图片展示特效

来源:https://www.sucaihuo.com/js/3651.html 2018-04-28 11:13浏览(1723) 收藏

一款大气的基于js+CSS3全屏手风琴图片展示特效,点击图片切换到全屏显示大图,过渡效果也非常棒!
CSS3全屏手风琴图片展示特效
分类:图片代码 > 手风琴 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

var $cont = document.querySelector('.cont');
var $elsArr = [].slice.call(document.querySelectorAll('.el'));
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));

setTimeout(function() {
  $cont.classList.remove('s--inactive');
}, 200);

$elsArr.forEach(function($el) {
  $el.addEventListener('click', function() {
    if (this.classList.contains('s--active')) return;
    $cont.classList.add('s--el-active');
    this.classList.add('s--active');
  });
});

$closeBtnsArr.forEach(function($btn) {
  $btn.addEventListener('click', function(e) {
    e.stopPropagation();
    $cont.classList.remove('s--el-active');
    document.querySelector('.el.s--active').classList.remove('s--active');
  });
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2