<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></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 = {
O : [],
screen : {},
grid : {
size : 4,
borderSize : 6,
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
},
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; }
var ni = 0;
var n = (tv.grid.size / 2) - .5;
for (var y = -n; y <= n; y++)
{
for (var x = -n; x <= n; x++)
{
var o = document.createElement('img');
var i = img[(ni++) % img.length];
o.className = 'tvout';
o.src = i.src;
tv.screen.obj.appendChild(o);
o.point3D = {
x : x,
y : y,
z : new Library.ease()
};
o.point2D = {};
o.ratioImage = 1;
tv.O.push(o);
o.onmouseover = function ()
{
if (!tv.grid.zoomed)
{
if (tv.o)
{
tv.o.point3D.z.target = 0;
tv.o.className = 'tvout';
}
this.className = 'tvover';
this.point3D.z.target = -.5;
tv.o = this;
}
}
o.onclick = function ()
{
if (!tv.grid.zoomed)
{
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){
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;
}
}
}
o.calc = function ()
{
this.point3D.z.move(this.point3D.z.target, .5);
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;
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;
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
)
);
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);
}
}
o.draw = function ()
{
if (this.complete)
{
if (!this.loaded)
{
if (!this.img)
{
this.img = new Image();
this.img.src = this.src;
}
if (this.img.complete)
{
this.style.visibility = 'visible';
this.ratioImage = this.img.width / this.img.height;
this.loaded = true;
this.img = false;
}
}
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);
}
}
}
}
tv.resize();
mouse.y = tv.screen.y + tv.screen.h;
mouse.x = tv.screen.x + tv.screen.w;
tv.run();
},
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;
}
},
run :
20个以上的页面效果
需积分: 9 82 浏览量
2008-11-29
10:13:30
上传
评论
收藏 147KB RAR 举报
20个以上页面特效.rar （50个子文件） 
div加滚动条.html 2KB 字体滚动.html 557B 日历.html 5KB 时钟开始停止继续.html 739B 迷糊.html 10KB html简单编辑器.html 2KB innerHTML.html 492B 265天气预报免费代码.html 0B
运行代码 复制代码 另存.htm 31KB
运行代码 复制代码 另存_files 
discuz_icon.gif 719B newtopic.gif 1KB ystat.gif 43B qq1_offline.gif 600B style_1.css 16KB 06.gif 6KB reply.gif 1KB star_level1.gif 547B inf.js 25KB ystat.js 15KB common.js 14KB jsmenu.gif 56B logo.gif 5KB ajax.js 6KB star_level2.gif 585B msn.js 1015B menu.js 8KB footer_top.gif 55B dimana.gif 43B newspecial.gif 449B sigline.gif 229B top.gif 91B dimana(1).gif 43B 长标题的文章可以使用简单的CSS样式实现省略号控制显示.html 1KB 上下滚动.html 3KB outerHTML.html 786B 图片适应div大小而变.html 3KB 分页css.html 2KB ctrl+enter.html 1KB 禁止右键.html 543B 跑马灯效果 跑马灯效果.html 938B 跑马灯.html 873B 不间断滚动.html 4KB 手机号码归属地查询.html 464B 屏蔽F5.html 2KB 在图片上加标记 184.gif 3KB
90旋转大厦.jpg 75KB 在图片上加标记.html 2KB 图片滚动效果.html 2KB addTime.htm 8KB 上下左右移动.html 4KB资源评论
海哥
- 粉丝: 18
- 资源: 38
最新资源
- KIMI大模型浏览器插件
- b61fa64a08a02de0e0d49d53bb84c444.amr
- 5ffd9193f6aec31bbf16030a46680dc7.avi
- DA14531-蓝牙传感器连接传输数据固件
- logisim实验MIPS运算器(ALU)设计（内含4位先行进位74182、四位快速加法器、32位快速加法器）-Educoder_logisim里面连线,实现4位先行进位74182和4位快速加法器-C
- 高等数学第一章第二节数列的极限
- Python 版冒泡排序算法源代码
- 基于YOLOv8的教室人脸识别 附源码 预训练模型
- 基于JAVA实现的用于全局监控网络请求错误并记录日志的library
- tensorflow-gpu-2.7.2-cp38-cp38-manylinux2010-x86-64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
