<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wanna tell her - interactive DHTML </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="图片地址">
</div>
<div id="FPS"> </div>
</body>
</html>
相关推荐
JavaScript3D特效集锦是一个汇集了多种利用JavaScript实现的3D视觉效果的资源库，它展示了JavaScript在网页交互和图形渲染方面的强大能力。这个集合涵盖了从基础到高级的各种3D技术，包括图片和文字的3D展示方式。...
在JavaScript的世界里，3D特效是一种引人注目的技术，它可以为网页增添深度感和动态交互性。在“javascript 3D 特效.zip”这个压缩包中，包含了一些示例，展示了如何利用JavaScript实现图表的多样变换效果，如块状、...
在本资源"JS交互式3D相册切换模糊特效.zip"中，主要包含了一个使用JavaScript实现的3D相册切换效果，它具有可调整的图片数量和模糊度特性。这个功能丰富的代码库允许用户在网页上创建一种动态、立体且视觉效果独特的...
javascript网页特效108个 http://bbs.esiyang.com收集的. Javascript 3D相册 图片轮换效果总结 Javascript 3D相册 多样化摺叠菜单 一个很酷的登陆效果！ WINDOWS脚本技术大全 新浪...
对于更高级的3D特效，JavaScript可以结合WebGL API，实现在浏览器中直接渲染3D图形，创建出引人入胜的视觉体验。 9. **数据可视化** JavaScript库如D3.js可以帮助开发者将复杂的数据转换为易于理解的图表和图形，...
抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript...
"JS带模糊效果交互式3D相册切换特效"就是这样一个例子，它利用JavaScript的力量，为用户提供了一种新颖且吸引人的3D相册浏览体验。这个项目不仅提供了视觉上的冲击力，还通过互动性和模糊效果增加了用户参与度。 ...
在这个名为"1500个JS特效源码"的资源中，包含了丰富的JavaScript特效示例，涵盖了网页设计中的多种常见效果。 首先，我们要了解JS特效在网页开发中的重要性。JavaScript可以处理用户输入、控制多媒体、进行动画制作...
JavaScript库如Three.js或Parallax.js可以帮助开发者轻松实现3D视差滚动，但根据提供的文件列表，此案例可能使用的是自定义的JavaScript代码，存放在`js`目录下的文件中。 `zns_demo.html`是主演示文件，它可能包含...
JavaScript特效在网页设计中起着至关重要的作用，它为用户带来了动态交互的体验，而3D相册则是这种体验的一种独特展现方式。本篇将详细探讨如何利用JavaScript创建一个简洁的3D相册效果。 首先，JavaScript是一种轻...
6. **Canvas和WebGL**：对于更高级的图形和游戏特效，JavaScript可以与HTML5的Canvas或WebGL结合，实现2D和3D的图形渲染，创造出令人惊叹的视觉体验。 7. **过渡和变换**：CSS3引入了transition和transform属性，但...
本压缩包"用js实现的3D特效.rar"显然是一个包含用JavaScript编写的3D特效资源的集合。让我们深入探讨一下JS实现3D特效的相关知识点。 1. **WebGL**: JavaScript在实现3D特效时，通常会借助WebGL库。WebGL是一种基于...
在"JavaScript精彩特效大全源代码4"中，你可能会看到一些常见的特效，如图片懒加载、拖放功能、时间轴滚动、粒子效果、3D转换等。每个特效背后都涉及了JavaScript的基本语法、对象和数组操作、函数、闭包、定时器等...
9. **WebGL**：对于3D特效，WebGL提供了在浏览器中进行三维图形渲染的能力，可以创建复杂的3D模型和场景。 10. **响应式设计**：JavaScript可以检测窗口大小变化，实现响应式布局，让网站在不同设备上呈现良好效果...
6. **JS特效六**：可能是3D图片翻转效果，为用户提供一种全新的查看图片的方式，适用于创新和现代感强的设计场景。 7. **JS特效七**：可能是一个图片拖放功能，允许用户直接通过拖放操作上传图片，常用于社交媒体或...
11. **页面特效**：全屏滚动、页面切换、3D效果等，JavaScript让静态的HTML页面变得生动有趣。 12. **游戏娱乐**：简单的HTML5游戏，如迷宫、打地鼠等，可以利用JavaScript实现逻辑控制和用户交互。 13. **状态栏...
虽然不是所有3D特效都需要WebGL，但在某些复杂的3D场景中，WebGL能提供更高效、更流畅的性能。在3D标签云的例子中，如果涉及到深度渲染和复杂的光照效果，WebGL可能会被引入。 压缩包内的文件可能包含以下内容： 1...
5. **框架和库**：像jQuery、React、Vue.js和Angular这样的JavaScript库和框架为开发炫酷特效提供了便利。它们简化了DOM操作，提供了动画API，并且拥有丰富的社区插件，可以快速实现复杂的特效。 6. **Canvas和...
在IT行业中，JavaScript和CSS是前端开发中的两个关键...如果你对这些技术有所了解，可以通过下载源码进行研究，逐步剖析代码，理解每个部分的作用，这样不仅可以学习到如何创建3D特效，还可以提高你的前端开发技能。
"3d云js特效"这个标题表明我们将讨论一种利用JavaScript实现的3D云状元素，这些元素可以在网页上进行三维变换，如改变位置和大小，以创建出一种动态的云层漂浮感。这种特效常被用作导航菜单或标签，因为它能够吸引...