xiao_yi
- 浏览: 415296 次
- 性别:
- 来自: 北京
-
最新评论
-
zhonghuafy：
楼主找到解决方法没
ClientAbortException,java.net.SocketException. -
lfwer：
确实很强！
超强javascript -
fh2002：
写的啥东西。。。你写了这么一些JS就量Ajax?
ajax页面实现跳转 -
mmdexc：
查看源码
<input type=button valu ...
实用且不花哨的js代码大全 -
yinxiangjake：
好贴,学习中,莫大的帮助啊
Java如何调用可执行文件和批处理命令
<!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 : function ()
{
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);
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);
for (var i = 0, o; o = tv.O[i]; i++)
{
o.calc();
o.draw();
}
setTimeout(tv.run, 32);
}
}
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>
<div id="screen"></div>
<div id="bankImages">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741181035801.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741183375921.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741184993505.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185038473.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185117345.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185166937.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185221625.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185296017.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185481737.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185777873.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
</div>
<script type="text/javascript">
onresize = tv.resize;
tv.init();
</script>
</body>
</html>
<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 : function ()
{
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);
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);
for (var i = 0, o; o = tv.O[i]; i++)
{
o.calc();
o.draw();
}
setTimeout(tv.run, 32);
}
}
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>
<div id="screen"></div>
<div id="bankImages">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741181035801.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741183375921.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741184993505.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185038473.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185117345.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185166937.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185221625.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185296017.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185481737.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200741185777873.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
<img alt="" src="http://www.sg803.com/UploadFile/pic/picbig/200742961603953.jpg">
</div>
<script type="text/javascript">
onresize = tv.resize;
tv.init();
</script>
</body>
</html>
分享到：
发表评论
-
日期格式比较,在使用大于时效率慢的解决方案
2014-01-22 10:30 902--耗时:0.39'' select * from ... -
java.lang.LinkageError: LinkageError while defining class
2010-11-25 10:52 3971■·在这个社会上最让 ... -
很垃圾的统计
2008-03-25 18:30 1050//以下数据才仅仅是两 ... -
医院分级与分等
2008-01-12 10:15 8373医院按其功能、任务不同划分为一、二、三级。 一级医院：（病床 ... -
实用且不花哨的js代码大全
2007-12-28 11:19 2967事件源对象 event.srcElement.tagName ... -
ClientAbortException,java.net.SocketException.
2007-12-27 09:37 3990TOMCAT报异常，如下： 引用 java.lang.Ru ... -
java.lang.reflect.InvocationTargetException
2007-12-21 09:25 2246WARN - LoggerListener.onApplica ... -
Java软件架构设计慨论
2007-12-07 17:57 853开始之初的架构设计决 ... -
Connection reset by peer: socket write error
2007-12-06 10:45 2757java.lang.RuntimeException: jav ... -
用Ant工具管理Web应用
2007-12-06 09:37 1186一. 安装配置Ant:下载地址为http://jakarta ... -
关于杂乱的复选框处理.
2007-12-04 15:05 852/** * add **/ function get ... -
js提交表单奇怪的错.
2007-12-03 14:27 958Line:1057 Char:4 Code:0 Error:' ... -
Fckeditor
2007-12-01 15:07 11471.test.jsp <div> ... -
关于DynaActionForm
2007-12-01 14:48 10771.import org.apache.struts.acti ... -
三级联下拉
2007-12-01 13:59 997<script language="JavaS ... -
超强javascript
2007-11-30 13:10 960javascript:R=0; x1=.1; y1=0.05; ... -
javascript:void(0)
2007-11-29 12:44 25677今天看到《AJAX开发简略》中所有的<A href> ... -
生成随机密码
2007-11-28 13:57 1106/** * 生成随机密码 * @p ... -
公司不让自带笔记本,我该怎么做?
2007-11-26 17:24 2058公司不让自笔记本了,气疯了... 所在的公司是一家刚刚成立的公 ... -
a different object with the same identifier
2007-11-23 14:35 2092org.springframework.orm.hiberna ...
相关推荐
在本项目中，我们主要探讨如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 来创建一个功能强大且美观的相册，其效果可媲美QQ空间的相册展示。这个相册不仅具备基本的图片浏览功能，还提供了一些便利的交互...
【标题】：“若愚推荐国外相册源码超强”意味着我们正在讨论的是一套用于创建和管理在线相册的源代码，这套源码可能由知名的技术博主或专家“若愚”推荐，暗示其功能强大、性能优越，适合于构建高质量的国外相册应用...
【超强图片浏览插件】是一款高效且用户友好的图片相册浏览工具，它以其独特的功能和易用性在网页设计领域中脱颖而出。该插件主要适用于网页开发，为用户提供了一个流畅的图片查看体验，尤其适合那些需要展示大量图片...
√ 超强人性化设计，个人档、日志、音乐盒、相册、留言板、收藏夹6大主打栏目。 √ 多用户支持，二级域名访问用户博客功能。 √ 全Ajax无刷新页面设计，支持独立页面访问。 √ 会员博客装扮箱可自由更换皮肤背景、...
超强JS网页版泡泡龙游戏下载 11.兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断...
9、重点推出：动网论坛博客系统，论坛用户可直接激活个人博客帐号、帖子可直接转入自己的博客、个人文章、文章收藏、个人相册、链接（书签）、交易（类似论坛交易，可做个人店铺）、关键字设置（可设置一些常用的...