html+css+JavaScript实现照片墙特效_html照片墙3d魔方资源-CSDN下载

共12个文件

jpg：10个

html：1个

js：1个

html

javaScript

需积分: 50 145 浏览量 2019-01-05 22:01:53 上传评论 1 收藏 695KB ZIP 举报

在网页设计中，创建引人入胜的用户体验是至关重要的，而“照片墙”就是一种常见且有效的设计手法。本文将深入探讨如何使用HTML、CSS和JavaScript来实现一个交互式的照片墙特效，其中包括图片的布局、点击居中显示以及取消渐移回原位的动画效果。 HTML（HyperText Markup Language）是网页内容的基础结构，负责定义页面上的各个元素。在创建照片墙时，我们可以使用`<div>`元素作为每个图片的容器，然后通过`<img>`标签引入图片资源。例如： ```html <div class="photo-container"> <img src="image1.jpg" alt="图片描述"> </div> ``` 接着，CSS（Cascading Style Sheets）用于控制网页的样式和布局。我们可以利用CSS Grid或Flexbox来布局这些照片容器，实现响应式设计，使照片墙在不同屏幕尺寸下都能美观地展示。例如，使用CSS Grid实现三列布局： ```css .photo-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } ``` 为了实现点击图片后居中显示的效果，我们需要添加一个JavaScript事件监听器来捕捉点击事件。JavaScript（ECMAScript）是网页的动态语言，能为网页增加交互性。当图片被点击时，可以通过改变CSS属性实现居中： ```javascript document.querySelectorAll('.photo-container img').forEach(img => { img.addEventListener('click', function() { this.style.transform = 'translateX(-50%) translateY(-50%) scale(1.2)'; }); }); ``` 上面的代码将图片的位置平移到其父元素的中心，并放大1.2倍。同时，为了取消渐移回原位的动画，我们可以添加一个`mouseleave`事件监听器，当鼠标离开图片时恢复原样： ```javascript img.addEventListener('mouseleave', function() { this.style.transform = 'translate(0) scale(1)'; }); ``` 此外，为了增强用户体验，我们还可以添加过渡效果，使变换过程更加平滑。在CSS中设置`transition`属性即可： ```css .photo-container img { transition: transform 0.3s ease-in-out; } ``` 通过HTML构建基本结构，CSS进行布局和样式设计，以及JavaScript实现交互功能，我们可以创建一个具有点击居中和渐移回原位动画的照片墙特效。这样的照片墙不仅视觉效果出色，而且具有良好的用户体验，可以广泛应用于个人作品展示、社交媒体应用等场景。

资源推荐

资源详情

资源评论

收起资源包目录

照片墙效果.zip （12个子文件）

照片墙效果

images

pic5.jpg 93KB

pic9.jpg 79KB

pic8.jpg 90KB

pic2.jpg 66KB

pic3.jpg 71KB

pic10.jpg 44KB

pic7.jpg 123KB

pic4.jpg 117KB

pic6.jpg 82KB

pic1.jpg 66KB

Underscore-min.js 15KB

index.html 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; border: none; list-style: none; } html, body, ul{ width: 100%; height: 100%; } #ps{ position: relative; } #ps li{ width: 250px; height: 360px; box-shadow: 0 0 10px #000; position: absolute; transition: all 1s; } #ps li.current{ left: 50% !important; top: 50% !important; transform: rotate(0deg) translate(-50%, -50%) scale(1.2, 1.2) !important; z-index: 99; } </style> </head> <body> <ul id="ps"></ul> <script src="js/Underscore-min.js"></script> <script> window.onload = function () { var ps = document.getElementById("ps"); //动态创建li标签 for(var i=0; i<10; i++){ //创建li标签 var li = document.createElement("li"); ps.appendChild(li); //创建img标签 var img = document.createElement("img"); img.src = "images/pic" + (i + 1) + ".jpg"; li.appendChild(img); } //获取所有的li var allLis = ps.children; var screenW = document.documentElement.clientWidth - 250; var screenH = document.documentElement.clientHeight - 360; //遍历 for(var j=0; j<allLis.length; j++){ //取出单个li标签 var li = allLis[j]; //随机分布 li.style.left = _.random(0, screenW) + 'px'; li.style.top = _.random(0, screenH) + 'px'; //随机角度 li.style.transform = 'rotate(' + _.random(0, 360) +'deg)'; //点击事件 li.onclick = function () { for(var i = 0; i<allLis.length; i++){ allLis[i].className = ''; } this.className = 'current'; } } } </script> </body> </html>

评论收藏

内容反馈