3D照片放大展示窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="阿里西西 http://www.alixixi.com/" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为超酷3D照片展示效果，属于站长常用代码，更多相册代码代码请访问阿里西西JS代码频道。" />
<title>超酷3D照片展示效果_阿里西西</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #000;
}
#screen img {
position: absolute;
cursor: pointer;
visibility: hidden;
width: 0px;
height: 0px;
}
#screen .tvover {
border: solid #876;
opacity: 1;
filter: alpha(opacity=100);
}
#screen .tvout {
border: solid #fff;
opacity: 0.7;
}
#bankImages {
display: none;
}
</style> <script type="text/javascript">
var Library = {};
Library.ease = function () {
this.target = 0;
this.position = 0;
this.move = function (target, speed)
{
this.position += (target - this.position) * speed;
}
} var tv = {
/* ==== variables ==== */
O : [],
screen : {},
grid : {
size : 4, // 4x4 grid
borderSize : 6, // borders size
zoomed : false
},
angle : {
x : new Library.ease(),
y : new Library.ease()
},
camera : {
x : new Library.ease(),
y : new Library.ease(),
zoom : new Library.ease(),
focalLength : 750 // camera Focal Length
}, /* ==== init script ==== */
init : function ()
{
this.screen.obj = document.getElementById('screen');
var img = document.getElementById('bankImages').getElementsByTagName('img');
this.screen.obj.onselectstart = function () { return false; }
this.screen.obj.ondrag = function () { return false; }
/* ==== create images grid ==== */
var ni = 0;
var n = (tv.grid.size / 2) - .5;
for (var y = -n; y <= n; y++)
{
for (var x = -n; x <= n; x++)
{
/* ==== create HTML image element ==== */
var o = document.createElement('img');
var i = img[(ni++) % img.length];
o.className = 'tvout';
o.src = i.src;
tv.screen.obj.appendChild(o);
/* ==== 3D coordinates ==== */
o.point3D = {
x : x,
y : y,
z : new Library.ease()
};
/* ==== push object ==== */
o.point2D = {};
o.ratioImage = 1;
tv.O.push(o);
/* ==== on mouse over event ==== */
o.onmouseover = function ()
{
if (!tv.grid.zoomed)
{
if (tv.o)
{
/* ==== mouse out ==== */
tv.o.point3D.z.target = 0;
tv.o.className = 'tvout';
}
/* ==== mouse over ==== */
this.className = 'tvover';
this.point3D.z.target = -.5;
tv.o = this;
}
}
/* ==== on click event ==== */
o.onclick = function ()
{
if (!tv.grid.zoomed)
{
/* ==== zoom in ==== */
tv.camera.x.target = this.point3D.x;
tv.camera.y.target = this.point3D.y;
tv.camera.zoom.target = tv.screen.w * 1.25;
tv.grid.zoomed = this;
} else {
if (this == tv.grid.zoomed){
/* ==== zoom out ==== */
tv.camera.x.target = 0;
tv.camera.y.target = 0;
tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
tv.grid.zoomed = false;
}
}
}
/* ==== 3D transform function ==== */
o.calc = function ()
{
/* ==== ease mouseover ==== */
this.point3D.z.move(this.point3D.z.target, .5);
/* ==== assign 3D coords ==== */
var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
var z = this.point3D.z.position * tv.camera.zoom.position;
/* ==== perform rotations ==== */
var xy = tv.angle.cx * y - tv.angle.sx * z;
var xz = tv.angle.sx * y + tv.angle.cx * z;
var yz = tv.angle.cy * xz - tv.angle.sy * x;
var yx = tv.angle.sy * xz + tv.angle.cy * x;
/* ==== 2D transformation ==== */
this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
this.point2D.x = yx * this.point2D.scale;
this.point2D.y = xy * this.point2D.scale;
this.point2D.w = Math.round(
Math.max(
0,
this.point2D.scale * tv.camera.zoom.position * .8
)
);
/* ==== image size ratio ==== */
if (this.ratioImage > 1)
this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
else
{
this.point2D.h = this.point2D.w;
this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
}
}
/* ==== rendering ==== */
o.draw = function ()
{
if (this.complete)
{
/* ==== paranoid image load ==== */
if (!this.loaded)
{
if (!this.img)
{
/* ==== create internal image ==== */
this.img = new Image();
this.img.src = this.src;
}
if (this.img.complete)
{
/* ==== get width / height ratio ==== */
this.style.visibility = 'visible';
this.ratioImage = this.img.width / this.img.height;
this.loaded = true;
this.img = false;
}
}
/* ==== HTML rendering ==== */
this.style.left = Math.round(
this.point2D.x * this.point2D.scale +
tv.screen.w - this.point2D.w * .5
) + 'px';
this.style.top = Math.round(
this.point2D.y * this.point2D.scale +
tv.screen.h - this.point2D.h * .5
) + 'px';
this.style.width = this.point2D.w + 'px';
this.style.height = this.point2D.h + 'px';
this.style.borderWidth = Math.round(
Math.max(
this.point2D.w,
this.point2D.h
) * tv.grid.borderSize * .01
) + 'px';
this.style.zIndex = Math.floor(this.point2D.scale * 100);
}
}
}
}
/* ==== start script ==== */
tv.resize();
mouse.y = tv.screen.y + tv.screen.h;
mouse.x = tv.screen.x + tv.screen.w;
tv.run();
}, /* ==== resize window ==== */
resize : function ()
{
var o = tv.screen.obj;
tv.screen.w = o.offsetWidth / 2;
tv.screen.h = o.offsetHeight / 2;
tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
{
tv.screen.x += o.offsetLeft;
tv.screen.y += o.offsetTop;
}
}, /* ==== main loop ==== */
run : function ()
{
/* ==== motion ease ==== */
tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
tv.camera.zoom.move(tv.camera.zoom.target, .05);
/* ==== angles sin and cos ==== */
tv.angle.cx = Math.cos(tv.angle.x.position);
tv.angle.sx = Math.sin(tv.angle.x.position);
tv.angle.cy = Math.cos(tv.angle.y.position);
tv.angle.sy = Math.sin(tv.angle.y.position);
/* ==== loop through all images ==== */
for (var i = 0, o; o = tv.O[i]; i++)
{
o.calc();
o.draw();
}
/* ==== loop ==== */
setTimeout(tv.run, 32);
}
} /* ==== global mouse position ==== */
var mouse = {
x : 0,
y : 0
}
document.onmousemove = function(e)
{
if (window.event) e = window.event;
mouse.x = e.clientX;
mouse.y = e.clientY;
return false;
} </script>
</head> <body>
您的位置：<a href="http://www.alixixi.com/">阿里西西</a> > <a href="http://js.alixixi.com/">网页特效</a> > <a href="http://js.alixixi.com/c/guanggao_1.shtml">广告代码</a>
<hr />
<div id="screen"></div> <div id="bankImages">
<img alt="" src="../../../网页元素文件夹/素材文件/dn1.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/dv1.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/n1.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/n2.jpg"> <img alt="" src="../../../网页元素文件夹/素材文件/n3.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/n4.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/n5.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/tn1.jpg"> <img alt="" src="../../../网页元素文件夹/素材文件/tn2.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/tn3.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/tn4.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/tv1.jpg"> <img alt="" src="../../../网页元素文件夹/素材文件/tv2.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/tv4.jpg">
<img alt="" src="../../../网页元素文件夹/素材文件/tv3.jpg"> </div> <script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>
<br>
<div align="center">
<p style="color:#FFFFFF">来源：design-studio.cn 更多访问阿里西西 www.alixixi.com</p>
<p></p>
<p style="color:#FFFFFF"></p>
<p></p>
</div> </body>
</html>
3D照片放大展示窗口的更多相关文章
- 超酷3D照片展示效果
@{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...
- 3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）
今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...
- 点击Winform右下角图标，在最前端展示窗口
//调用Windows API 展示窗口到最前端 SwitchToThisWindow(this.Handle, true);//窗体的句柄 this.Handle SwitchToThisW ...
- 基于 HTML5 的 3D 工业互联网展示方案
前言 通用电气(GE).IBM.英特尔等公司主推的“工业互联网”正在经历“产品-数据分析平台-应用-生态”的演进.这主要得益于 Predix 数据分析平台对工业互联网应用的整合能力.Predix 就像 ...
- 照片放大软件PhotoZoom怎么用？
做设计时,难免常常要上网找一些图片素材,但是有时候我们找到图片效果不尽人意,图片风格符合设计要求的的却图片太小,用photoshop放大后,图片的色块像素就出来了,效果极为不理想,这就要我们将图片进行 ...
- 手把手教小白如何用css+js实现页面中图片放大展示效果
1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
- 制作3D旋转视频展示区
CSS3 3D变形制作视频展示区 <!doctype html> <html lang="en"> <head> <meta charse ...
- 使用H5与webGL的3D 可视化地铁展示
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- Swift - 使用UIImagePickerController从相册选择照片并展示
1,UIImagePickerController介绍 (1)选择相册中的图片或者拍照,都是通过UIImagePickerController控制器实例化一个对象,然后通过self.presentVi ...
随机推荐
- jboss4.2.3 SSL配置 + 生成数字签名
一.生成数字签名 1. 生成JKS文件 keytool -genkey -keyalg RSA -alias jbosskey -keystore jbosskey.jks 在win7系统中,该文件的 ...
- Myeclipse配置 项目编码格式
修改MyEclipse 工作空间的编码 修改之后,在该工作空间下创建的任何项目,编码都是UTF-8,既,该项目下所有文件都是utf-8 格式,工作空间影响项目,项目影响文件 General --> ...
- MongoDB上的索引
1. 将索引建在number键上名为nameIndex并且为正序索引({number:-1}为倒序索引) 如: db.list名.ensureIndex({number:1},{name:" ...
- mysql基本sql语句大全(提升用语篇)
1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用) 法一:select * into b from a where 1<>1(仅用于SQlServer) 法二:s ...
- c#中如何将一个string数组转换为int数组
举个例子. string[] strArray = "a,b,c,d,e,f,g".Split(new char[]{ ',' }); int[] intArray; //C# 3 ...
- Ubuntu deb包使用
deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb dpkg 是Debian Package的简写,是为Debian 专 ...
- Spark Programming--Actions
first def first(): T first返回RDD中的第一个元素,不排序. 例子: count def count(): Long count返回RDD中的元素数量 例子: reduce ...
- javac 错误: 编码GBK的不可映射字符
在java代码中有中文注释,使用javac编译时,出现编码报错. 错误: 编码GBK的不可映射字符 问题原因: 在编译的时候,如果我们没有用-encoding参数指定我们的JAVA源程序的编码格式,则 ...
- Selenium2学习-025-WebUI自动化实战实例-023-页面快照截图应用之一 -- 常规截图（全页面）
通常我们在进行自动化测试的过程中,有时候需要对页面进行截图,以保存此时的页面,用作后续的判断或测试报告.在 Web UI 自动化测试脚本过程中,通常有以下几种截图的要求: 常规截图 - 页面样式(全页 ...
- Java的浮点数和整数的进制转换
整数的表达 –原码:第一位为符号位(0为正数,1为负数) –反码:符号位不动,原码取反 –负数补码:符号位不动,反码加1 –正数补码:和原码相同 -6 5 原码 10000110 0 ...