`
xiao_yi
  • 浏览: 406135 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS超强相册(分享大家)

脚本HTML 
阅读更多
<!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>
分享到：
| 你的心过门了吗？
评论
2 楼 liuqiang 2008-03-18  
51js上抄的
1 楼 accp_he 2008-02-29  
牛的嘛  纯脚本
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 3D相册 js 3D相册

    JavaScript 3D相册是一种利用Web技术实现的交互式图像展示方式，它通过结合HTML5、CSS3和JavaScript，特别是JavaScript的3D库，如Three.js或Pixi.js，为用户带来富有立体感和动态效果的图片浏览体验。在本文中，我们...

    10大JS相册,大家快来下载

    "10大JS相册"是一个集合，包含了一系列使用JavaScript实现的相册示例，这些示例可能是为了展示不同的功能、设计样式或动画效果。下面将详细探讨JavaScript在创建相册应用中的关键知识点： 1. **DOM操作**：在...

    抖音很火的JavaScript旋转3D相册源码.zip

    抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript...

    炫酷的JS弹性相册代码

    【炫酷的JS弹性相册代码】是一种使用纯JavaScript编写的、无需依赖jQuery的相册展示解决方案。这种相册设计以其独特的动态效果和良好的浏览器兼容性吸引了许多开发者。以下是关于这个项目的详细知识点： 1. **纯...

    js相册特效.js相册特效

    JavaScript相册特效是一种常见的网页交互元素，用于展示图片集，为用户提供流畅且吸引人的浏览体验。在网页设计中，JavaScript的灵活性和强大的功能使得它成为实现动态相册的理想选择。以下是一些关于JavaScript相册...

    纯脚本相册源码，js相册源码，脚本相册源码

    "纯脚本相册源码"就是一种基于JavaScript（js）编写的相册实现方式，它不依赖任何服务器端的技术，完全由前端代码完成。这种源码的优势在于能够提供快速、动态的用户体验，同时减轻了服务器的压力。 1. **...

    js 女朋友相册

    总结来说，"js 女朋友相册"是一个使用JavaScript实现的3D相册项目，结合了WebGL技术和现代前端框架，为展示个人照片提供了一种创新的方式。它涉及到了3D图形编程、动画制作、文件处理和响应式设计等多个方面，体现了...

    超强JS+css相册完美效果堪比QQ空间

    在本项目中，我们主要探讨如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 来创建一个功能强大且美观的相册，其效果可媲美QQ空间的相册展示。这个相册不仅具备基本的图片浏览功能，还提供了一些便利的交互...

    Javascript SlideShow网页相册代码（JS+CSS）

    在实际代码中，你可能会看到一个JavaScript文件（如`slideshow.js`），其中包含滑动相册的逻辑，以及一个或多个CSS文件（如`styles.css`），用于样式设定。JavaScript文件可能包括函数，用于初始化相册、处理用户...

    js制作的相册

    在这个"js制作的相册"项目中，我们主要讨论的是如何利用JavaScript实现一个动态、交互式的相册效果。相册功能在网页中十分常见，它允许用户以可视化的方式浏览和操作一组图片，提供了一种直观且友好的用户体验。 ...

    javascript/js超强计算器

    在这个"JavaScript/js超强计算器"项目中，我们关注的是如何使用JavaScript来创建一个功能强大的计算工具，能够处理复杂的数学运算甚至公式。 首先，`Vector.js`可能包含了用于处理向量计算的函数。在JavaScript中，...

    3d相册js demo

    本示例中的"3d相册js demo"是一个使用JavaScript技术实现的3D相册项目，旨在提供一种新颖、立体的展示图片的方式，为用户带来更丰富的视觉体验。3D相册在网页设计中尤其受欢迎，因为它们能够吸引用户的注意力并增加...

    原生JS响应式相册相册

    响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册响应式相册...

    javascript 的相册浏览（超帅）找

    JavaScript 相册浏览是一种网页应用，它允许用户在网页上以动态、美观的方式查看一系列图片。这类应用通常具有平滑的过渡效果、导航控制以及图片缩放功能，为用户提供类似于桌面应用程序的体验。在本例中，我们关注...

    JS 图片相册效果

    "JS 图片相册效果"就是一个典型的例子，它利用jQuery这个轻量级且强大的JavaScript库来实现。jQuery插件使得开发人员可以方便地添加各种功能，而无需从头编写复杂的代码。 该插件的主要目标是创建一个类似于真实...

    JS弹出相册

    在本场景中，"JS弹出相册"是指利用JavaScript技术来创建一个可交互的图片浏览功能，通常用于网站上的照片展示。当用户点击某个触发元素（如图片缩略图）时，会弹出一个包含多张图片的相册，用户可以在这个相册中浏览...

    js相册 div+css+js相册

    本项目利用JavaScript（js）、HTML（超文本标记语言）和CSS（层叠样式表）来构建一个简单的相册，这对于初学者来说是一个很好的实践项目。下面将详细介绍这三个核心技术在构建相册中的应用。 1. **HTML** ...

    可自动缩放的JS弹性相册代码.rar

    本文将深入探讨“可自动缩放的JS弹性相册代码”这一主题，帮助开发者理解如何利用JavaScript创建一个能根据浏览器窗口大小自适应调整的图片相册。 一、JavaScript基础 在构建任何JS特效之前，首先需要了解...

    js移动相册

    JS移动相册主要是利用JavaScript的事件处理、DOM操作以及响应式设计来实现，使得用户在手机或平板设备上可以方便地浏览和操作照片。 【描述】：Redis服务端，Windows版本 Redis是一款高性能的键值存储系统，常用于...

    js相册特效源码 精心收集18中相册特效

    本资源包精心收集了18种不同的JS相册特效源码，涵盖了多种风格和功能，旨在满足不同项目需求。 1. **基础概念**： - **JavaScript**：一种轻量级的脚本语言，常用于网页交互，如动态效果和用户反馈。 - **相册...

Magicbox
Global site tag (gtag.js) - Google Analytics