html5立体照片墙效果,js实现3D照片墙效果

柔情只为你懂 2022-10-06 03:57 580阅读 0赞

聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦

效果：

1、点击Start View进入照片墙

2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦

3、点击上面的导航条，可以让对应的图片在中间显示

4、点击中间的图片该照片翻转，显示背面(照片的描述信息)

实现过程：

1、用数据生成结构(模拟的数据，此处不再提供)

2、对所有图片进行排序

3、计算两侧图片的随机范围

4、控制图片翻转

5、控制导航按钮切换图片

6、遮罩层动画实现

HTML代码：

### \{ \{caption\}\} ###

\{ \{desc\}\}

\{ \{split\}\}



Start View

CSS代码：

/\*最外层样式\*/

.photo\_wall\{

width: 100%;

height: 600px;

position: relative;

background: url(../imgs/bg.jpg) no-repeat center center;

background-size: cover;

overflow: hidden;

/\*照片区域的样式\*/

.photo \{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 1;

opacity: 0;

transition: 1s;

/\*每个照片的样式\*/

.photo .photo\_i,.photo .photo\_3d,.photo .photo\_side \{

width: 336px;

height: 392px;

position: absolute;

left: 0;

top: 0;

.photo .photo\_i \{

transition: 800ms;

perspective: 750px;

left: 50%;

top: 50%;

transform: translate(-50%,-50%) scale(.5) rotate(0);

.photo .photo\_3d \{

transition: 500ms;

transform-style: preserve-3d;

transform-origin: 0 50%;

/\*正面和反面的公共样式\*/

.photo .photo\_side \{

border-radius: 6px;

background: \#fff;

padding: 26px 24px;

box-sizing: border-box;

backface-visibility: hidden;

/\*照片的正面样式\*/

.photo .photo\_front \{

transform: rotateY(0);

.photo .photo\_front p \{

width: 286px;

height: 286px;

border: 2px solid \#d8536d;

overflow: hidden;

display: flex;

/\*align-items: center;\*/

.photo .photo\_front p img\{

width: 100%;

align-self: center;

.photo .photo\_front h3\{

width: 166px;

height: 44px;

background: \#d8536d;

border-radius: 0 0 6px 6px;

margin: 0 auto;

text-align: center;

font: 16px/44px Arial;

color: \#fff;

/\*照片的反面样式\*/

.photo .photo\_back \{

transform: rotateY(-180deg);

.photo .photo\_back .desc \{

font-size: 14px;

line-height: 20px;

color: \#d8536d;

.photo .photo\_back a \{

color: \#d8356d;

/\*照片的居中样式\*/

.photo .center \{

z-index: 9999;

left: 50%;

top: 50%;

transform: translate(-50%,-50%) scale(1) rotate(0);

/\*照片正面的class\*/

.photo .front .photo\_3d \{

transform: translateX(0) rotateY(0);

/\*照片反面的calss\*/

.photo .back .photo\_3d \{

transform: translateX(100%) rotateY(-180deg);

/\*导航栏的样式\*/

.nav \{

position: absolute;

left: 0;

top: 0;

z-index: 888;

width: 100%;

height: 200px;

padding-top: 10px;

box-sizing: border-box;

text-align: center;

background: -webkit-linear-gradient(top,rgba(0,0,0,.5),transparent);

@font-face \{

font-family: "icont";

src: url(../font/iconfont.woff) format("woff");

.nav .nav\_i \{

display: inline-block;

width: 30px;

height: 30px;

border-radius: 50%;

background: rgba(255,255,255,.5);

font-family: "icont";

text-align: center;

line-height: 30px;

color: rgba(255,255,255,0);

cursor: pointer;

transform: scale(.5);

transition: 500ms;

.nav .active \{

color: rgba(255,255,255,1);

transform: scale(.9) rotateY(0);

.nav .back \{

transform: scale(.8) rotateY(-180deg);

/\*遮罩层\*/

.photo\_wall .shade \{

position: absolute;

left: 0;

top: 0;

z-index: 2;

width: 100%;

height: 100%;

background: rgba(255,255,255,.7);

display: flex;

justify-content: center;

align-items: center;

.photo\_wall .hide \{

transition: 1s;

opacity: 0;

transform: scale(0) rotateY(360deg);

.photo\_wall .shade .start \{

width: 200px;

height: 60px;

border: 2px solid \#d8536d;

border-radius: 10px;

background: rgba(248,229,227,.5);

text-align: center;

font: 22px/60px Arial;

cursor: pointer;

js代码：用到了我昨天在博客上写的工具函数：

// 用来获取元素

// 用来判断某个元素是否有某个class

// 如果没有添加

// 如果有就删除

//获取元素id class tag all

function M(sele) \{

var first = sele.substr(0,1),

isArr = sele.split(' ');//id class tag

if(first==="\#"&&isArr.length==1)\{//id

return document.getElementById(sele.substr(1));

\}else\{

var arr = Array.from(document.querySelectorAll(sele));

return arr.length == 1?arr\[0\] :arr;

//判断某个元素是否包含某个class

function hasClass(obj,cls)\{

var re = new RegExp(\`\\\\b$\{cls\}\\\\b\`);

if(re.test(obj.className))\{

return true;

\}else\{

return false;

//给某个元素添加class

function addClass(obj,cls)\{

if(!hasClass(obj,cls))\{

obj.className += \` $\{cls\}\`;//不要忘了前面的空格哈

obj.className = obj.className.trim();//去掉前后空格

//给某个元素删除class

function rmClass(obj,cls)\{

var re = new RegExp(\`\\\\b$\{cls\}\\\\b\`);

if(hasClass(obj,cls))\{

obj.className = obj.className.replace(re,'')

.replace(/\\s\{2\}/,' ').trim();//去掉前后空格

提供主要的实现步骤的js代码：

(function () \{

//---------------------------------------------------------

// 初始化数据

var data = dataList,len = data.length;

createPhotos(data);

var n = 0;

//---------------------------------------------------------

// 基本逻辑

M('.shade .start').addEventListener('click',function() \{

addClass(M('.shade'),'hide');

M('.photo').style.opacity = 1;

addClass(M(\`\#photo\_0\`),'center');

setTimeout(function()\{

sortImgs(n);

\}, 200);

\});

M('.nav\_i').forEach((item,i)=>\{

item.onclick = function()\{

turnImg(M(\`\#photo\_$\{i\}\`));

\};

\});

//---------------------------------------------------------

// 需求函数化

// 需求1：利用数据生成所有html结构

function createPhotos(data) \{

var photo\_html = M('.photo').innerHTML.split('\{ \{split\}\}')\[0\].trim(),

nav\_html = M('.nav').innerHTML.trim();

var photos = \[\],nav = \[\];

data.forEach((item,i)=>\{

var photoTemp = photo\_html.replace(/\{ \{id\}\}/,i)

.replace(/\{ \{src\}\}/,'src')

.replace(/\{ \{img\}\}/,item.img)

.replace(/\{ \{caption\}\}/,item.caption)

.replace(/\{ \{desc\}\}/,item.desc),

navTemp = nav\_html.replace(/\{ \{id\}\}/,i);

photos.push(photoTemp);

nav.push(navTemp);

\});

photos.push(\`

$\{nav.join('')\}

\`);

M('.photo').innerHTML = photos.join('');

// 需求2:给所有的图片排序

function sortImgs(n) \{

var photos = M('.photo\_i');

initPhotos(photos);

var center = photos.splice(n,1)\[0\];

addClass(center,'center');

addClass(M(\`\#nav\_$\{n\}\`),'active');

// center.addEventListener('click', function(e)\{

// turnImg(this);

// \});

center.onclick = function () \{

turnImg(this);

\};

// 对剩余的图片进行随机排序

photos.sort(()=>\{

return 0.5 - Math.random();

\})

var rP = scope(); //返回左右两侧范围 从 x - y

// 分成左侧和右侧两部分

var left = photos.splice(0,Math.ceil((len-1)/2)),

right = photos;

left.forEach((item,i)=>\{

item.style.zIndex = rn(\[0,len\]);

item.style.left = rn(rP.L.x) + 'px';

item.style.top = rn(rP.L.y) + 'px';

item.style.transform = \`translate(0,0) scale(.9) rotate($\{rn(\[-2160,2160\])\}deg)\`;

\});

right.forEach((item,i)=>\{

item.style.zIndex = rn(\[0,len\]);

item.style.left = rn(rP.R.x) + 'px';

item.style.top = rn(rP.R.y) + 'px';

item.style.transform = \`translate(0,0) scale(.9) rotate($\{rn(\[-2160,2160\])\}deg)\`;

\});

// 需求3 编写某个区间的随机整数

function rn(arr) \{

var max = Math.max.apply(null,arr),

min = Math.min.apply(null,arr);

var p = Math.round(Math.random() \* (max - min) + min);

//?;

return p;

// 需求4 计算随机的范围

function scope() \{

var outer = M('.photo\_wall');

var pic = M(\`\#photo\_$\{rn(\[0,len-1\])\}\`);

var W = outer.clientWidth,

H = outer.clientHeight,

w = pic.offsetWidth,

h = pic.offsetHeight;

console.log(W,w);

var data = \{

L:\{

x:\[-w/3,W/2 - w/2 - w\],

y:\[-h/3,H - h\*2/3\]

\},

R:\{

x:\[W/2 + w/2,W - w\*2/3\],

y:\[-h/3,H - h\*2/3\]

return data;

// 需求5：控制图片翻转

function turnImg(ele) \{

var cur = ele.id.split('\_')\[1\];

var nav = M(\`\#nav\_$\{cur\}\`);

if(!hasClass(ele,'center'))\{ //如果点的不是当前对应的按钮就重新排序

return sortImgs(cur)

if(hasClass(ele,'front'))\{

//翻转到背面

console.log('现在是正面准备移除front');

addClass(ele,'back');

console.log(ele.className);

rmClass(ele,'front');

console.log(ele.className);

addClass(nav,'back');

\}else\{

//翻转到正面

console.log('现在是反面准备移除back');

addClass(ele,'front');

console.log(ele.className);

rmClass(ele,'back');

console.log(ele.className);

rmClass(nav,'back')

// 需求6 初始化所有样式

function initPhotos(objs) \{

objs.forEach((item,i)=>\{

if(hasClass(item,'center'))\{

var nav = M(\`\#nav\_$\{i\}\`);

rmClass(item,'center');

rmClass(item,'back');

addClass(item,'front');

rmClass(nav,'active');

rmClass(nav,'back');

item.onclick = null;

item.style.left = '';

item.style.top = '';

item.style.zIndex = '';

item.style.transform = \`translate(-50%,-50%) scale(1.1) rotate(0deg)\`;

\});

\})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html5立体照片墙效果,js实现3D照片墙效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 AXURE教程：简单制作拖拽照片交互墙效果

相关 html5立体照片墙效果,js实现3D照片墙效果

相关 html css3中照片墙,CSS_CSS3简单实现照片墙，HTML 复制代码代码如下:

相关 css3实现绚丽照片墙

相关 H5 照片墙制作

相关 GridView实现照片墙

相关原生js实现3D照片墙

相关 CSS照片墙

相关照片墙

相关 css 照片墙案例