<!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: #eee;
width: 100%;
height: 100%;
color: #fff;
font-family: arial;
font-size: 0.8em;
}
#screen {
position: absolute;
width: 100%;
height: 100%;
background: #000;
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:#000;
border: #000 solid 1em;
}
#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">
// =============================================================
// ===== 3D gallery experiment =====
// script written by Gerard Ferrandez - April 5, 2010
// http://www.dhteumeuleu.com
// use under a CC-BY-NC license
// -------------------------------------------------------------
// update: April 17 : added hyperlinks, tweaked z-index
// =============================================================
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
照片墙3d.zip （27个子文件） 
jquery-3D-141226231826 
index.html 11KB images 
7b4cc906b3.jpg 72KB 69833ed09a.jpg 72KB d04505fe96.jpg 63KB 94da4fb185.jpg 57KB 200ff06c0e.jpg 79KB 0e85d4fe6d.jpg 52KB fe00425d0a.jpg 49KB 774573728f.jpg 62KB 65f8787807.jpg 65KB ed57bce8c4.jpg 90KB 1ef7ea6559.jpg 66KB
r.gif 53B ed37a0925e.jpg 72KB f22e53da3a.jpg 63KB a8008ae7f7.jpg 36KB 73d310387e.jpg 85KB b05c9edc7f.jpg 66KB 6a884d6ef2.jpg 46KB 8fe86226ff.jpg 62KB d57dc05c81.jpg 61KB b05b0c6962.jpg 65KB c136720da3.jpg 53KB 46eae50db6.jpg 55KB 661a66329a.jpg 60KB 5b0b0c8119.jpg 98KB
jquery插件库.url 119B资源评论
小吴同学（学习版）
- 粉丝: 28
- 资源: 2
最新资源
- PLC 西门子smart200 锁机 最新原创有图片证明配对应西门子smart700IE V3程序，分期期付款 动态验证码，无限次加密 程序例程
- 汇编语言基础入门知识和案例
- 基于ssm的就业信息管理系统源码（java毕业设计完整源码+LW）.zip
- 土豆缺陷识别数据集，使用yolov11格式标注，8034张图片，识别率在81.2%，可识别损坏的土豆缺陷土豆，病菌感染的土豆，正常土豆等
- 无刷电机FOC控制量产方案，原理图，PCB，源代码，元器件BOM 可用于电动三轮，电动车等代步工具上，代码基于C语言，功能丰富，具有刹车功能、助力功能、欠压检测、巡航功能、防盗、自学习、故障显示等功
- 土豆缺陷识别数据集，使用yolov9格式标注，8034张图片，识别率在81.2%，可识别损坏的土豆缺陷土豆，病菌感染的土豆，正常土豆等
- matlab绘图的.m文件，里面涉及到字体大小，横纵坐标调整等操作，有需要自取
- 建筑地震保护系统建模与分析：基于小振幅及榫头锁入条件的研究
- 基于ssm的二手交易平台网站源码（java毕业设计完整源码+LW）.zip
- 土豆缺陷识别数据集，使用yolov8格式标注，8034张图片，识别率在81.2%，可识别损坏的土豆缺陷土豆，病菌感染的土豆，正常土豆等
- 基于ssm的家用电器销售网站源码（java毕业设计完整源码+LW）.zip
- 不同颜色正方体检测59-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 基于ssm的影院管理系统源码（java毕业设计完整源码+LW）.zip
- 土豆缺陷识别数据集，使用yolov7格式标注，8034张图片，识别率在81.2%，可识别损坏的土豆缺陷土豆，病菌感染的土豆，正常土豆等
- 开发者专用浏览器 免费浏览器 - 干净好用的浏览器
- java超市综合管理信息系统源代码.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
