<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3D效果</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #fff;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #fff;
}
#screen img {
position: absolute;
cursor: pointer;
width: 0px;
height: 0px;
-ms-interpolation-mode:nearest-neighbor;
}
#bankImages {
visibility: hidden;
}
#FPS {
position: absolute;
right: 5px;
bottom: 5px;
font-size: 10px;
color: #666;
font-family: verdana;
}
</style>
<script type="text/javascript">
/* ==== Easing function ==== */
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 : [],
fps : 0,
screen : {},
angle : {
x : new Library.ease(),
y : new Library.ease()
},
camera : {
x : new Library.ease(),
y : new Library.ease()
},
create3DHTML : function (i, x, y, z, sw, sh) {
/* ==== create HTML image element ==== */
var o = document.createElement('img');
o.src = i.src;
tv.screen.obj.appendChild(o);
/* ==== 3D coordinates ==== */
o.point3D = {
x : x,
y : y,
z : new Library.ease(),
sw : sw,
sh : sh,
w : i.width,
h : i.height
};
o.point3D.z.target = z;
/* ==== push object ==== */
o.point2D = {};
tv.O.push(o);
/* ==== on mouse over event ==== */
o.onmouseover = function () {
if (this != tv.o) {
this.point3D.z.target = tv.mouseZ;
tv.camera.x.target = this.point3D.x;
tv.camera.y.target = this.point3D.y;
if (tv.o) tv.o.point3D.z.target = 0;
tv.o = this;
}
return false;
}
/* ==== on mousedown event ==== */
o.onmousedown = function () {
if (this == tv.o) {
if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
else {
tv.o = false;
this.onmouseover();
}
}
}
/* ==== main 3D function ==== */
o.animate = function () {
/* ==== 3D coordinates ==== */
var x = this.point3D.x - tv.camera.x.position;
var y = this.point3D.y - tv.camera.y.position;
this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
/* ==== rotations ==== */
var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
var yz = tv.angle.cy * xz - tv.angle.sy * x;
var yx = tv.angle.sy * xz + tv.angle.cy * x;
/* ==== 2D transform ==== */
var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
x = yx * scale;
y = xy * scale;
var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
/* ==== HTML rendering ==== */
var o = this.style;
o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
o.width = w + 'px';
o.height = h + 'px';
o.zIndex = 10000 + Math.round(scale * 1000);
}
},
/* ==== init script ==== */
init : function (structure, FL, mouseZ, rx, ry) {
this.screen.obj = document.getElementById('screen');
this.screen.obj.onselectstart = function () { return false; }
this.screen.obj.ondrag = function () { return false; }
this.mouseZ = mouseZ;
this.camera.focalLength = FL;
this.angle.rx = rx;
this.angle.ry = ry;
/* ==== create objects ==== */
var i = 0, o;
while( o = structure[i++] )
this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
/* ==== start script ==== */
this.resize();
mouse.y = this.screen.y + this.screen.h;
mouse.x = this.screen.x + this.screen.w;
/* ==== loop ==== */
setInterval(tv.run, 16);
setInterval(tv.dFPS, 1000);
},
/* ==== resize window ==== */
resize : function () {
var o = tv.screen.obj;
if (o) {
tv.screen.w = o.offsetWidth / 2;
tv.screen.h = o.offsetHeight / 2;
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 () {
tv.fps++;
/* ==== motion ease ==== */
tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
tv.camera.x.move(tv.camera.x.target, .025);
tv.camera.y.move(tv.camera.y.target, .025);
/* ==== 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 images ==== */
var i = 0, o;
while( o = tv.O[i++] ) o.animate();
},
/* ==== trace frames per seconds ==== */
dFPS : function () {
document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
tv.fps = 0;
}
}
/* ==== 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;
}
/* ==== starting script ==== */
onload = function() {
onresize = tv.resize;
/* ==== build grid ==== */
var img = document.getElementById('bankImages').getElementsByTagName('img');
var structure = [];
for (var i = -300; i <= 300; i += 120)
for (var j = -300; j <= 300; j += 120)
structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
/* ==== let's go ==== */
tv.init(structure, 350, -200, .005, .0025);
}
</script>
</head>
<body>
<div id="screen"> </div>
<div id="bankImages">
<img alt="" src="images/1.jpg">
</div>
<div id="FPS"> </div>
</body>
</html>
分享到：
相关推荐
在本主题中，我们将深入探讨"很强悍的26个js图片特效"，这些特效为网页设计者提供了丰富的工具，以提升网页的视觉吸引力和用户互动性。 1. 图片滑动门效果：这是一种常见的JS图片特效，通过平滑地改变图片尺寸或...
本教程将探讨如何使用Flash制作一款3D立体展示效果的图片焦点Banner，这是一款集图片特效、图片插件和3D视觉效果于一体的动态展示工具。 首先，让我们分析“标题”：“flash图片特效制作banner焦点图片3D立体展示...
在IT行业中，图片特效是一种广泛应用于网页设计、应用程序开发、视频制作等领域的技术，它可以极大地提升用户的视觉体验。"从左上角斜切换出来的图片特效"是一种常见的动态效果，常用于展示新内容或者进行页面过渡，...
在HTML5的世界里，图片特效都十分绚丽，我们在网站上也分享过很多不错的HTML5图片特效，现在我们精选10款效果惊艳的HTML5图片特效分享给大家。 1、HTML5 3D正方体旋转动画 很酷的3D特效 之前我们分享过很多非常不错...
【基于WebGL实现3D图片特效】是一种利用现代网页技术为用户提供交互式3D体验的方法。WebGL（Web Graphics Library）是JavaScript API的一种，它允许在浏览器中进行硬件加速的三维图形渲染，无需任何插件。这个特效的...
在IT领域，JavaScript（简称js）是一种广泛应用于前端开发的编程语言，因其强大的交互性和动态性，常被用来实现各种视觉效果，特别是图片特效。在这个名为"超酷js图片特效"的资源包中，我们可以期待找到一系列创新且...
在本主题"JavaScript图片特效源码"中，我们将探讨如何使用JavaScript为网页中的图片添加各种视觉效果，以提升用户体验和网页的吸引力。 一、图片特效的基本原理 图片特效主要通过JavaScript操作DOM（文档对象模型）...
在IT行业中，图片特效是一种利用计算机图形学技术对图像进行处理和增强，以达到特定艺术效果的方法。在图像处理软件中，图片特效通常包括滤镜、调整、合成等多种功能，可以用于个人娱乐、专业设计或者视觉传达等多个...
实现不错的js图片特效，简单快捷，不用懂js就能做出酷酷的效果
【JavaScript与CSS3实现超链接图片特效】 在网页设计中，增强用户体验的一种常见方式是通过交互效果来吸引用户的注意力。本教程将介绍如何利用JavaScript和CSS3技术在鼠标悬停超链接时展示图片特效，为用户提供更为...
"VB中多种图片特效的例子" 提供了一系列的示例代码，帮助开发者掌握如何在VB6中实现这些特效。以下是这些特效的详细介绍： 1. 推出特效：这种效果通常用于图像的渐显或渐隐，类似于物体从屏幕外逐渐滑入或滑出。...
在这个“jsp图片特效处理例子”中，我们将探讨如何利用JSP来实现图片的各种特效处理，如图片的上传、显示、缩放、旋转以及滤镜效果等。以下是一些相关的知识点： 1. **JSP基本语法**：JSP由静态HTML和动态Java代码...
在这个特定的项目中，"JS实现的空间图片特效"是指利用JS技术来创建一种伪3D视觉效果，使得图片看起来像是在三维空间内展示，带给用户更丰富的视觉体验。 首先，我们需要理解3D空间的概念。3D空间是由三个坐标轴——...
【As3 开源图片特效类】是一个专门为ActionScript 3（AS3）开发的图片处理库，它提供了丰富的图片特效功能。AS3是Adobe Flash Platform的主要编程语言，广泛应用于创建互动性内容、游戏以及富互联网应用程序（RIA）...
在JavaScript的世界里，图片特效是增强网页互动性和用户体验的重要手段。本文将深入探讨标题和描述中提到的十款经典JavaScript图片特效代码，以及它们在实际应用中的价值。 1. **JS特效一**：通常，这样的特效可能...
在IT行业中，图片特效是网页设计和前端开发中不可或缺的一部分，它们可以极大地提升用户体验和视觉吸引力。本资源“超经典图片特效”显然聚焦于JavaScript（js）实现的图像处理技术，这是一种广泛应用于网页动态效果...
在网页设计中，为了提升用户体验和视觉吸引力，各种图片特效被广泛应用。JavaScript作为一种强大的客户端脚本语言，可以灵活地创建动态、交互式的图像效果。以下将详细介绍标题和描述中提到的五个JavaScript实现的...
在IT领域，图片特效处理是图像处理技术的重要组成部分，它能赋予普通图片独特的视觉效果，增强艺术表现力。本资源提供了六种常见的图片特效源码，涵盖了锐化、黑白、模糊、怀旧、浮雕等效果，对于学习图像处理算法和...
在Android开发中，图片特效处理是一项常见的需求，无论是为了增强用户体验，还是为了实现特定的设计风格。这个名为"Android 常用图片特效处理源码.zip"的压缩包中，包含了多个示例图片以及一个源码文件，用于演示...
此外，“jiaoben”系列文件名可能是示例代码或教程，可能包含了各种不同的图片特效实现，如过渡效果、鼠标悬停响应、图像裁剪等。 总的来说，这些特效展示了HTML5、CSS3和JavaScript在创建动态图片效果上的强大能力...