js和CSS3实现缩略图全屏展开特效源码.zip资源-CSDN文库

共13个文件

jpg：8个

js：3个

html：1个

版权申诉

151 浏览量 2022-11-01 01:18:19 上传评论收藏 486KB ZIP 举报

在JavaScript和CSS3技术的支持下，我们可以创建出各种丰富的网页交互效果，其中之一就是缩略图全屏展开特效。这个特效通常用于图片展示或者项目预览，用户点击缩略图后，图片会以全屏的形式展开，提供更好的视觉体验。下面我们将深入探讨如何使用这两种技术来实现这样的功能。我们需要理解JavaScript的基础知识。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它主要负责处理网页的动态效果和用户交互。在缩略图全屏展开特效中，JavaScript的角色是监听用户的点击事件，触发图片的放大动画，并控制全屏模式下的显示内容。在HTML结构中，我们通常为每个缩略图设置一个独立的`<img>`元素，同时附带一个数据属性（如"data-fullsrc"）来存储全尺寸图片的URL。例如： ```html <img src="thumbnail.jpg" data-fullsrc="fullimage.jpg" class="thumbnail" /> ``` 接着，我们用CSS3来定义样式。CSS3引入了许多新的选择器、布局模式和动画特性，使得创建动态效果变得更加简单。对于这个特效，我们可能需要以下几点关键CSS规则： 1. **过渡（Transitions）**：用来平滑地改变元素的样式属性。例如，可以设置图片的宽度、高度和透明度的过渡效果，使得缩放过程看起来更自然。 ```css .thumbnail { transition: all 0.5s ease; } ``` 2. **变换（Transforms）**：允许我们改变元素的位置、大小和形状。在全屏展开时，可以使用`scale()`函数来放大图片。 ```css .fullscreen { transform: scale(1); } ``` 3. **全屏样式**：使用CSS3的`position: fixed`和`z-index`来使图片覆盖整个屏幕。 ```css .fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } ``` 然后，我们使用JavaScript来处理用户交互。这里可以使用`addEventListener`来监听`click`事件，当用户点击缩略图时，执行相应的功能： ```javascript var thumbnails = document.querySelectorAll('.thumbnail'); thumbnails.forEach(function(thumbnail) { thumbnail.addEventListener('click', function() { // 获取全尺寸图片URL var fullSrc = this.getAttribute('data-fullsrc'); // 创建或获取全屏图片元素 var fullImage = document.getElementById('full-image') || createFullImage(fullSrc); // 添加全屏样式并显示 fullImage.classList.add('fullscreen'); fullImage.style.display = 'block'; // 缩小原缩略图 this.style.transform = 'scale(0.5)'; }); }); function createFullImage(src) { // 创建全屏图片元素 // ... return fullImage; } // 全屏关闭功能 document.addEventListener('keydown', function(event) { if (event.keyCode === 27) { // 按下Esc键时 var fullImage = document.querySelector('.fullscreen'); if (fullImage) { fullImage.classList.remove('fullscreen'); fullImage.style.display = 'none'; // 恢复缩略图大小 var thumbnail = document.querySelector('.thumbnail'); thumbnail.style.transform = 'scale(1)'; } } }); ``` 以上代码片段展示了如何使用JavaScript和CSS3实现缩略图全屏展开的基本流程。实际应用中，你可能还需要考虑其他因素，比如响应式设计、图片加载优化以及错误处理等。通过这种方式，你可以为网站添加生动有趣的交互体验，提高用户的参与度和满意度。

资源推荐

资源详情

资源评论

收起资源包目录

js和CSS3实现缩略图全屏展开特效源码.zip （13个子文件）

132689851512104831

js_CSS3_TweenMax

css

base.css 9KB

img

thumb4.jpg 7KB

2.jpg 22KB

1.jpg 216KB

thumb3.jpg 5KB

3.jpg 126KB

thumb2.jpg 4KB

4.jpg 67KB

thumb1.jpg 16KB

index.html 8KB

demo.js 11KB

imagesloaded.pkgd.min.js 5KB

TweenMax.min.js 112KB

<!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>js和CSS3缩略图全屏展开特效</title> <link rel="stylesheet" type="text/css" href="css/base.css" /> <script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script> </head> <body class="loading"> <svg class="hidden"> <symbol id="icon-arrow" viewBox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/> </symbol> <symbol id="icon-drop" viewBox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/> </symbol> <symbol id="icon-plus" viewBox="0 0 25 24"> <title>plus</title> <path d="M13.568 11.216h11.216v1.568H13.568V24H12V12.784H.784v-1.568H12V0h1.568v11.216z"/> </symbol> <symbol id="icon-arrowdown" viewBox="0 0 12 25"> <title>arrow down</title> <path d="M4.916.3v21.017l-3.563-3.564L.25 18.856 5.7 24.3l5.45-5.444-1.102-1.103-3.564 3.564V.3z"/> </symbol> </svg> <main> <div class="message">View on a larger screen to see the effect</div>  <div class="grid grid--deco"> <div class="grid__box"></div> <div class="grid__box"></div> <div class="grid__box"></div> <div class="grid__box"></div> <div class="grid__box"></div> </div>  <div class="grid grid--outer"> <header class="codrops-header"> <div class="codrops-links"> <a class="codrops-icon codrops-icon--prev" href="http://www.jb51.net/" title="返回下载页"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a> <a class="codrops-icon codrops-icon--drop" href="http://www.jb51.net/" title="脚本之家"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a> </div> <h1 class="codrops-header__title">Full Image Reveal Effect</h1> </header> <div class="title-wrap"> <h2 class="title">Andrew Jacobsen</h2> <span class="subtitle">selected projects</span> <span class="year">2018</span> </div> <a href="https://github.com/codrops/FullImageReveal/" class="github">GitHub</a> <div class="side"> <span class="side__content">Produced in London</span> <span class="side__content">Made by Brain Gap</span> </div> </div>  <div class="fullview"> <div class="fullview__item" style="background-image: url(img/1.jpg)"> <span class="fullview__item-number">01</span> <div class="fullview__item-titlewrap"> <h3 class="fullview__item-title">Patterns of nature</h3> <p class="fullview__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <span class="fullview__item-more">more</span> </div> </div> <div class="fullview__item" style="background-image: url(img/2.jpg)"> <span class="fullview__item-number">02</span> <div class="fullview__item-titlewrap"> <h3 class="fullview__item-title">Shapes from the future</h3> <p class="fullview__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <span class="fullview__item-more">more</span> </div> </div> <div class="fullview__item" style="background-image: url(img/3.jpg)"> <span class="fullview__item-number">03</span> <div class="fullview__item-titlewrap"> <h3 class="fullview__item-title">Black revelations</h3> <p class="fullview__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <span class="fullview__item-more">more</span> </div> </div> <div class="fullview__item" style="background-image: url(img/4.jpg)"> <span class="fullview__item-number">04</span> <div class="fullview__item-titlewrap"> <h3 class="fullview__item-title">Silence and noise</h3> <p class="fullview__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <span class="fullview__item-more">more</span> </div> </div> <h3 class="fullview__title">Andrew Jacobsen</h3> </div>  <div class="revealer"></div>  <div class="grid grid--thumbs"> <div class="grid__item" data-revealer-color="#8779d2"> <h3 class="grid__item-title"><span>Patterns of nature</span></h3> <span class="grid__item-number"><span>01</span></span> <div class="grid__item-imgwrap"> <img class="grid__item-img" src="img/thumb1.jpg" alt="Some image" /> <div class="grid__item-bg" style="background-image: url(img/thumb1.jpg)"></div> </div> </div> <div class="grid__item" data-revealer-color="#79a5d2"> <h3 class="grid__item-title"><span>Shapes from the future</span></h3> <span class="grid__item-number"><span>02</span></span> <div class="grid__item-imgwrap"> <img class="grid__item-img" src="img/thumb2.jpg" alt="Some image" /> <div class="grid__item-bg" style="background-image: url(img/thumb2.jpg)"></div> </div> </div> <div class="grid__item" data-revealer-color="#79d2bd"> <h3 class="grid__item-title"><span>Black revelations</span></h3> <span class="grid__item-number"><span>03</span></span> <div class="grid__item-imgwrap"> <img class="grid__item-img" src="img/thumb3.jpg" alt="Some image" /> <div class="grid__item-bg" style="background-image: url(img/thumb3.jpg)"></div> </div> </div> <div class="grid__item" data-revealer-color="#d2a279"> <h3 class="grid__item-title"><span>Silence and noise</span></h3> <span class="grid__item-number"><span>04</span></span> <div class="grid__item-imgwrap"> <img class="grid__item-img" src="img/thumb4.jpg" alt="Some image" /> <div class="grid__item-bg" style="background-image: url(img/thumb4.jpg)"></div> </div> </div> <div class="grid__item grid__item--more"> <button class="grid__toggle"> <span class="grid__toggle-inner grid__toggle-more"> <span class="grid__toggle-text">more</span> <svg class="grid__toggle-icon grid__toggle-icon--more"><use xlink:href="#icon-plus"></use></svg> </span> <span class="grid__toggle-inner grid__toggle-back"> <span class="grid__toggle-text">back</span> <svg class="grid__toggle-icon"><use xlink:href="#icon-arrowdown"></use></svg> </span> </button>

评论收藏

内容反馈

版权申诉