CSS3和js带炫酷鼠标滑过的多列布局特效源码.zip资源-CSDN文库

共9个文件

css：3个

eot：1个

woff：1个

版权申诉

css3

66 浏览量 2022-10-31 02:05:13 上传评论收藏 13KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3和js带炫酷鼠标滑过的多列布局特效源码.zip （9个子文件）

132689916582108840

CSS3_js_duolie

css

htmleaf-demo.css 6KB

style.css 14KB

normalize.css 2KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 6KB

stopExecutionOnTimeout.js 2KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>带炫酷鼠标滑过效果的多列布局效果</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" type="text/css" href="css/style.css">  </head> <body translate="no" > <header class="htmleaf-header"> <h1>带炫酷鼠标滑过效果的多列布局效果 <span>Cool Layout with Complex Chainable Animation</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="cont s--inactive">  <div class="cont__inner">  <div class="el"> <div class="el__overflow"> <div class="el__inner"> <div class="el__bg"></div> <div class="el__preview-cont"> <h2 class="el__heading">Section 1</h2> </div> <div class="el__content"> <div class="el__text">Whatever</div> <div class="el__close-btn"></div> </div> </div> </div> <div class="el__index"> <div class="el__index-back">1</div> <div class="el__index-front"> <div class="el__index-overlay" data-index="1">1</div> </div> </div> </div>   <div class="el"> <div class="el__overflow"> <div class="el__inner"> <div class="el__bg"></div> <div class="el__preview-cont"> <h2 class="el__heading">Section 2</h2> </div> <div class="el__content"> <div class="el__text">Whatever</div> <div class="el__close-btn"></div> </div> </div> </div> <div class="el__index"> <div class="el__index-back">2</div> <div class="el__index-front"> <div class="el__index-overlay" data-index="2">2</div> </div> </div> </div>   <div class="el"> <div class="el__overflow"> <div class="el__inner"> <div class="el__bg"></div> <div class="el__preview-cont"> <h2 class="el__heading">Section 3</h2> </div> <div class="el__content"> <div class="el__text">Whatever</div> <div class="el__close-btn"></div> </div> </div> </div> <div class="el__index"> <div class="el__index-back">3</div> <div class="el__index-front"> <div class="el__index-overlay" data-index="3">3</div> </div> </div> </div>   <div class="el"> <div class="el__overflow"> <div class="el__inner"> <div class="el__bg"></div> <div class="el__preview-cont"> <h2 class="el__heading">Section 4</h2> </div> <div class="el__content"> <div class="el__text">Whatever</div> <div class="el__close-btn"></div> </div> </div> </div> <div class="el__index"> <div class="el__index-back">4</div> <div class="el__index-front"> <div class="el__index-overlay" data-index="4">4</div> </div> </div> </div>   <div class="el"> <div class="el__overflow"> <div class="el__inner"> <div class="el__bg"></div> <div class="el__preview-cont"> <h2 class="el__heading">Section 5</h2> </div> <div class="el__content"> <div class="el__text">Whatever</div> <div class="el__close-btn"></div> </div> </div> </div> <div class="el__index"> <div class="el__index-back">5</div> <div class="el__index-front"> <div class="el__index-overlay" data-index="5">5</div> </div> </div> </div>  </div>  </div> <script src="js/stopExecutionOnTimeout.js"></script> <script type="text/javascript"> 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'); }); $el.addEventListener('keypress', function (e) { if (this.classList.contains('s--active')) return; if (e.which !== 13) 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'); }); $btn.addEventListener('keypress', function (e) { if (e.which !== 13) return; e.stopPropagation(); $cont.classList.remove('s--el-active'); document.querySelector('.el.s--active').classList.remove('s--active'); }); }); </script> </body> </html>

评论收藏

内容反馈

版权申诉