3d照片墙源码

最新推荐文章于 2024-03-23 00:44:33 发布
最新推荐文章于 2024-03-23 00:44:33 发布
阅读量8.4k 收藏 22
点赞数 3
文章标签： js html 3D 照片墙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012889434/article/details/42567115
版权

图片保存在与本页面相同目录下的images文件夹下 图片名称与代码中统一即可。

图片切换有3D动画效果，


页面源码如下



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D照片墙</title>


<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #1E4A91;
width: 100%;
height: 100%;
color: #000;
font-family: arial;
font-size: 0.8em;
}
#screen {
position: absolute;
width: 100%;
height: 100%;
background: #3A9FC9;//视图背景色
overflow: hidden;
}
#screen img, canvas { 
position: absolute;
left: -9999px;
cursor: pointer;
        image-rendering: optimizeSpeed;


}
#screen .href {
border: #FFF dotted 1px;
}
#screen .fog { 
position: absolute;
background: #fff;
opacity: 0.1;
filter: alpha(opacity=10);
}
#command {
position:absolute;
left: 1em;
top: 1em;
width: 130px;
z-index: 30000;
background:#3A9FC9;

}
#bar {
position:relative;
left: 1em;
top: 1em;
height: 160px;
}
#bar .button { 
position: absolute;
background: #222;
width: 20px;
height: 20px;
cursor: pointer;
}
#bar .loaded { 
background: #666;
}
#bar .viewed { 
background: #fff;
}
#bar .selected { 
background: #f00;
}
#urlInfo {
position: absolute;
background: url(images/r.gif) no-repeat 0 4px;
visibility: hidden;
z-index: 30000;
padding-left: 12px;
cursor: pointer;
}
</style>


<script type="text/javascript">



var m3D = function () {
/* ---- private vars ---- */
var diapo = [],
imb,
scr,
bar,
selected,
urlInfo,
imagesPath = "images/",
camera = {x:0, y:0, z:-650, s:0, fov: 500},
nw = 0,
nh = 0;
/* ==== camera tween methods ==== */
camera.setTarget = function (c0, t1, p) {
if (Math.abs(t1 - c0) > .1) {
camera.s = 1;
camera.p = 0;
camera.d = t1 - c0;
if (p) {
camera.d *= 2;
camera.p = 9;
}
}
}
camera.tween = function (v) {
if (camera.s != 0) {
camera.p += camera.s;
camera[v] += camera.d * camera.p * .01;
if (camera.p == 10) camera.s = -1;
else if (camera.p == 0) camera.s = 0;
}
return camera.s;
}
/* ==== diapo constructor ==== */
var Diapo = function (n, img, x, y, z) {
if (img) {
this.url = img.url;
this.title = img.title;
this.color = img.color;
this.isLoaded = false;
if (document.createElement("canvas").getContext) {
/* ---- using canvas in place of images (performance trick) ---- */
this.srcImg = new Image();
this.srcImg.src = imagesPath + img.src;
this.img = document.createElement("canvas");
this.canvas = true;
scr.appendChild(this.img);
} else {
/* ---- normal image ---- */
this.img = document.createElement('img');
this.img.src = imagesPath + img.src;
scr.appendChild(this.img);
}
/* ---- on click event ---- */
this.img.onclick = function () {
if (camera.s) return;
if (this.diapo.isLoaded) {
if (this.diapo.urlActive) {
/* ---- jump hyperlink ---- */
top.location.href = this.diapo.url;
} else {
/* ---- target positions ---- */
camera.tz = this.diapo.z - camera.fov;
camera.tx = this.diapo.x;
camera.ty = this.diapo.y;
/* ---- disable previously selected img ---- */
if (selected) {
selected.but.className = "button viewed";
selected.img.className = "";
selected.img.style.cursor = "pointer";
selected.urlActive = false;
urlInfo.style.visibility = "hidden";
}
/* ---- select current img ---- */
this.diapo.but.className = "button selected";
interpolation(false);
selected = this.diapo;
}
}
}
/* ---- command bar buttons ---- */
this.but = document.createElement('div');
this.but.className = "button";
bar.appendChild(this.but);
this.but.diapo = this;
this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 4)) + 'px';
this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';
this.but.onclick = this.img.onclick;
imb = this.img;
this.img.diapo = this;
this.zi = 25000;
} else {
/* ---- transparent div ---- */
this.img = document.createElement('div');
this.isLoaded = true;
this.img.className = "fog";
scr.appendChild(this.img);
this.w = 300;
this.h = 300;
this.zi = 15000;
}
/* ---- object variables ---- */
this.x = x;
this.y = y;
this.z = z;
this.css = this.img.style;
}
/* ==== main 3D animation ==== */
Diapo.prototype.anim = function () {
if (this.isLoaded) {
/* ---- 3D to 2D projection ---- */
var x = this.x - camera.x;
var y = this.y - camera.y;
var z = this.z - camera.z;
if (z < 20) z += 5000;
var p = camera.fov / z;
var w = this.w * p;
var h = this.h * p;
/* ---- HTML rendering ---- */
this.css.left   = Math.round(nw + x * p - w * .5) + 'px';
this.css.top    = Math.round(nh + y * p - h * .5) + 'px';  
this.css.width  = Math.round(w) + 'px';
this.css.height = Math.round(h) + 'px';
this.css.zIndex = this.zi - Math.round(z);
} else {
/* ---- image is loaded? ---- */
this.isLoaded = this.loading();
}
}
/* ==== onload initialization ==== */
Diapo.prototype.loading = function () {
if ((this.canvas && this.srcImg.complete) || this.img.complete) {
if (this.canvas) {
/* ---- canvas version ---- */
this.w = this.srcImg.width;
this.h = this.srcImg.height;
this.img.width = this.w;
this.img.height = this.h;
var context = this.img.getContext("2d");
context.drawImage(this.srcImg, 0, 0, this.w, this.h);
} else {
/* ---- plain image version ---- */
this.w = this.img.width;
this.h = this.img.height;
}
/* ---- button loaded ---- */
this.but.className += " loaded";
return true;
}
return false;
}

/* ==== screen dimensions ==== */
var resize = function () {
nw = scr.offsetWidth * .5;
nh = scr.offsetHeight * .5;
}
/* ==== disable interpolation during animation ==== */
var interpolation = function (bicubic) {
var i = 0, o;
while( o = diapo[i++] ) {
if (o.but) {
o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
}
}
}
/* ==== init script ==== */
var init = function (data) {
/* ---- containers ---- */
scr = document.getElementById("screen");
bar = document.getElementById("bar");
urlInfo = document.getElementById("urlInfo");
resize();
/* ---- loading images ---- */
var i = 0, 
   o,
n = data.length;
while( o = data[i++] ) {
/* ---- images ---- */
var x = 1000 * ((i % 4) - 1.5);
var y = Math.round(Math.random() * 4000) - 2000;
var z = i * (5000 / n);
diapo.push( new Diapo(i - 1, o, x, y, z));
/* ---- transparent frames ---- */
var k = diapo.length - 1;
for (var j = 0; j < 3; j++) {
var x = Math.round(Math.random() * 4000) - 2000;
var y = Math.round(Math.random() * 4000) - 2000;
diapo.push( new Diapo(k, null, x, y, z + 100));
}
}
/* ---- start engine ---- */
run();
}

/* ==== main loop ==== */
var run = function () {
/* ---- x axis move ---- */
if (camera.tx) {
if (!camera.s) camera.setTarget(camera.x, camera.tx);
var m = camera.tween('x');
if (!m) camera.tx = 0;
/* ---- y axis move ---- */
} else if (camera.ty) {
if (!camera.s) camera.setTarget(camera.y, camera.ty); 
var m = camera.tween('y');
if (!m) camera.ty = 0;
/* ---- z axis move ---- */
} else if (camera.tz) {
if (!camera.s) camera.setTarget(camera.z, camera.tz);
var m = camera.tween('z');
if (!m) {
/* ---- animation end ---- */
camera.tz = 0;
interpolation(true);
/* ---- activate hyperlink ---- */
if (selected.url) {
selected.img.style.cursor = "pointer";
selected.urlActive = true;
selected.img.className = "href";
urlInfo.diapo = selected;
urlInfo.onclick = selected.img.onclick;
urlInfo.innerHTML = selected.title || selected.url;
urlInfo.style.visibility = "visible";
urlInfo.style.color = selected.color || "#fff";
urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
} else {
selected.img.style.cursor = "default";
}
}
}
/* ---- anim images ---- */
var i = 0, o;
while( o = diapo[i++] ) o.anim();
/* ---- loop ---- */
setTimeout(run, 15);
}
return {

/* ==== initialize script ==== */
init : init
}
}();


</script>
</head>


<body>
<div id="screen">
<div id="command">


<h1 style="width: 122px; ">欢迎使用 捷瑞配件管理小助手  V2.0 </h1>

<div id="bar"></div>
</div>
<div id="urlInfo"></div>
</div>


<script type="text/javascript">
/* ==== start script ==== */
setTimeout(function() {
m3D.init(
[ 
{ src: '01.jpg',  color: '#fff' },
{ src: '02.jpg' },
{ src: '01.jpg',  color: '#fff' },
{ src: '03.jpg' },
{ src: '04.jpg' },
{ src: '05.jpg' },
{ src: '06.jpg' },
{ src: '07.jpg' },
{ src: '08.jpg' },
{ src: '09.jpg' },
{ src: '10.jpg' },
{ src: '11.jpg' },
{ src: '12.jpg' },
{ src: '13.jpg' },
{ src: '14.jpg' },
{ src: '15.jpg' }



]
);
}, 400);
</script>
<div style="text-align:center;">
<p><h2>制作人</h2></p>
</div>

</body>

</html> 




Mark_YPQ
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
3D照片墙内附FLASH源码
04-02
3D照片墙内附FLASH源码，其中FLASH部分可以根据自己需求设置
html5立体照片墙效果,js实现3D照片墙效果
weixin_30091863的博客
06-03 2655
聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦效果：1、点击Start View进入照片墙2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦3、点击上面的导航条，可以让对应的图片在中间显示4、点击中间的图片该照片翻转，显示...
在线批量修改百度网盘文件名，批量导出百度网盘目录文件，批量删除文件，批量管理文件，批量转存，批量分享等，支持百度网盘，阿里云盘，夸克网盘，迅雷网盘，123网盘，天翼云盘，蓝奏网盘，115网盘，UC网盘
最新发布
qq_29748599的博客
03-23 388
一款针对热门网盘的内容文件管理、批量分享、批量转存、批量修改重命名、批量检测链接、跨账号移动文件、多账号文件搜索等，支持不同网盘的不同账号的资源操作，各种资源导出，并支持资源库功能，优质资源一键转存！并支持账号池切换，转存时，空间不足，自动切换到另一个账号，无需人员干涉！全自动多网盘批量转存、分享等！在线批量修改百度网盘文件名，批量导出百度网盘目录文件，批量删除文件，批量管理文件，批量转存，批量分享等，支持百度网盘，阿里云盘，夸克网盘，迅雷网盘，123网盘，天翼云盘，蓝奏网盘，115网盘，UC网盘。
HTML实现3D照片旋转墙
gs1we1的博客
04-21 5933
html
3D照片墙图片展示特效代码
03-20
3D照片墙图片展示代码，3D立体效果照片墙，效果很酷，点击照片墙缩略图可以显示大图，带图片位置坐标功能。
JS实现的非常漂亮的3D立体照片墙显示效果
07-23
JS实现的非常漂亮的3D立体照片墙显示效果
js实现3D照片墙效果
01-19
聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦 效果： 1、点击Start View进入照片墙 2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦 3、点击上面的导航条，可以让对应的图片在中间显示 4、点击中间的图片该照片翻转，显示背面（照片的描述信息） 实现过程： 1、用数据生成结构（模拟的数据，此处不再提供） 2、对所有图片进行排序 3、计算两侧图片的随机范围 4、控制图片翻转 5、控制导航按钮切换图片 6、遮罩层
JavaScript 图片3D展示空间（3DRoom）javascript
chaoxidawang的专栏
01-09 689
一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3d(三维)的效果。 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 很久以前就看过一个3droom效果,是用复杂的计算实现的。 在上一篇图片变换研究过css3的transform之后,就想到一个更简单的方法来实现。 兼容:ie6/7/8, firefox 3.6.8, opera 10.
情人节浪漫3D照片墙源码
06-27
HTML 3D照片墙是一种创新的方式，可以用来送给女朋友一个特殊的礼物。 表格照片墙、球状照片墙、螺旋照片墙和格子照片墙等布局形式，可以将你们的美好回忆以独特而有趣的方式展示出来。通过这个特别的照片墙，你可以...
3D照片墙源码（自己替换图片地址）
12-23
源码如下： 1.把html 文件和img文件放在同级目录下 2.照片格式要注意是否一致哦 1、进入照片墙 3、点击上面的导航条，可以让对应的图片在中间显示 4、点击中间的图片该照片翻转 实现过程： 1、用数据生成结构...
Unity3D照片墙工程
09-18
Unity3D照片墙工程
520用JavaScript制作抖音热门同款3D照片墙（threeJS）
05-07
520快到了做一个抖音同款照片墙送给ta吧 效果请见：https://blog.csdn.net/qq_40482342/article/details/124590004?spm=1001.2014.3001.5501 本项目 用到 ES6 语法请用node打开 或者使用 编译器的 server 打开 如用...
JavaScript 图片3D展示空间（3DRoom）
cloudgamer的专栏
09-20 358
<br />一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。<br /> 程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。<br /> 很久以前就看过一个3DRoom效果，是用复杂的计算实现的。<br /> 在上一篇图片变换研究过css3的transform之后，就想到一个更简单的方法来实现。<br /> 兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.
js实现照片墙效果
qq_41429765的博客
08-12 771
js实现照片墙效果 <script src="underScore.js"></script> <style> *{ margin: 0; padding: 0; border: 0; list-style: none; } html, body,ul{ width: 100%;
3D照片墙实现
2201_75866478的博客
11-17 68
主要的知识是transform的知识点和animate的知识点，重点是transform-style: preserve-3d;作用是实现3d效果，当我们画正方体等3d图的时候会用到。是不是感觉3D照片墙很炫酷？其实很简单，仅仅只用到了html和css的知识。要是不用，我们看到的是2d效果。有兴趣的可以去瞧一下代码。
jsp图片墙_JS实现的非常漂亮的3D立体照片墙显示效果
weixin_36478447的博客
02-26 744
【实例简介】JS实现的非常漂亮的3D立体照片墙显示效果【实例截图】【核心代码】JS实现的非常漂亮的3D立体照片墙显示效果└── 3D立体照片墙├── images│ ├── 0e85d4fe6d.jpg│ ├── 1ef7ea6559.jpg│ ├── 200ff06c0e.jpg│ ├── 46eae50db6.jpg│ ├── 5b0b0c8119.jpg│ ├── 6...
unity 照片墙源码
10-28
Unity照片墙源码是一种在Unity引擎下制作的展示照片墙的源代码。照片墙通常是指一个以图片为主体，将多张图片在同一界面显示的布局效果。 使用Unity引擎制作照片墙源码的好处是能够充分利用Unity强大的渲染和交互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值