<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Javascript之弹性相册</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#box {
position: absolute;
background: #000;
border: gray solid 1px;
visibility: hidden;
}
#screen {
position: absolute;
left: 0px;
width: 100%;
top: 10%;
height: 80%;
background: #000;
border: white solid 1px;
}
#box img {
position: absolute;
border: white solid 2px;
cursor: pointer;
}
#box span {
position: absolute;
color: #ccc;
font-family: verdana;
font-size: 12px;
width: 200px;
}
#box a {
text-decoration: none;
color:#ff8000;
}
#box a:hover {
text-decoration: none;
background:#ff8000;
}
#box a:visited {
text-decoration: none;
color:#ff8000;
}
#box a:visited:hover {
text-decoration: none;
background:#ff8000;
color:#ffffff;
}
#lnk {
visibility: hidden;
}
</style>
<script type="text/javascript">
//禁止鼠标选中文字
document.onselectstart = new Function("return false");
//新的数组
O = new Array();
box = 0;
img = 0;
txt = 0;
tit = 0;
W = 0;
H = 0;
nI = 0;
sel = 0;
si = 0;
ZOOM = 0;
rImg = 0;
// 动画速度
speed = .1;
// 延迟时间
delay = .1;

function dText(){
txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
txt.innerHTML = O[sel].tx;
tit.innerHTML = O[sel].ti;
}

function CObj(n, s, x, tx, ti){
this.n = n;
this.dim = s;
this.tx = tx;
this.ti = ti;
this.is = img[n];
this.vz = 0;
this.sx = 0;
this.x0 = x;
this.x1 = 0;
this.zo = 0;
this.over = function() {
with(this){
if(n!=sel){
O[sel].dim = 100;
O[n].dim = ZOOM * 100;
sel = n;
l = 0;
for(k=0; k<nI; k++){
O[k].x0 = l;
l += O[k].dim;
}
txt.innerHTML = tit.innerHTML = "";
setTimeout("dText()", 12);
}
}
}
this.anim = function () {
with(this){
vz = speed*(vz+(x1-sx)*delay);
x1 -= vz;
sx = (n==0)?0:O[n-1].x0+O[n-1].dim;
zo -= (zo-dim)*speed;
l = (x1*si)+6*(n+1);
w = zo*si;
is.style.left = Math.round(l)+'px';
is.style.top = Math.round((H-w*rImg)*.5)+'px';
is.style.width = Math.round(w)+'px';
is.style.height = Math.round(w*rImg)+'px';
if(sel == n){
if(sel<nI*.5) {
tit.style.left = txt.style.left = Math.round(l+w+6)+'px';
} else {
tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';
}
txt.style.top = Math.round(-(w*rImg)*.25)+'px';
tit.style.top = Math.round((w*rImg)*.33)+'px';
}
}
}
}

function run(){
for(j in O)O[j].anim();
setTimeout("run()", 16);
}

function doResize(){
tit.style.width = Math.round(nx*.25)+'px';
txt.style.width = Math.round(nx*.25)+'px';
tit.style.fontSize = (nx/30)+'px';
txt.style.fontSize = (nx/70)+'px';
with(box.style){
width = Math.round(W)+'px';
height = Math.round(H)+'px';
left = Math.round(nx/2-W/2)+'px';
top = Math.round(ny/2-H/2)+'px';
}
}

function resize(){
nx = scr.offsetWidth;
ny = scr.offsetHeight;
W = nx*90/100;
si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
H = (100*si*rImg)+14;
doResize();
}
onresize = resize;

onload = function(){
scr = document.getElementById("screen");
box = document.getElementById("box");
tit = document.getElementById("tit");
txt = document.getElementById("txt");
img = box.getElementsByTagName("img");

Lnk = document.getElementById("lnk").getElementsByTagName("a");
nI = img.length;
ZOOM = nI;
rImg = img[0].height/img[0].width;
resize();
s = ZOOM * 100;
x = 0;
tit.innerHTML = img[0].title;
txt.innerHTML = img[0].alt;
for(i=0; i<nI; i++) {
var t = img[i].alt;
if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';
O[i] = new CObj(i, s, x, t, img[i].title);
img[i].alt = "";
img[i].title = "";
img[i].onmousedown = new Function("return false;");
img[i].onmouseover = new Function('O['+i+'].over();');
if(Lnk[i].href!=""){
/* ==== hyperlink ==== */
img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");');
}
x += s;
s = 100;
}
box.style.visibility = "visible";
run();
}
</script>
</head>
<body>
<div id="screen">
<div id="box"">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_gazebo2k3.jpg" title="explain" alt="">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_majesty.jpg" title="strain" alt="">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_newborn.jpg"title="retain" alt="">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_pyre.jpg" title="mundane" alt="">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_singularity.jpg" title="inhumane" alt="">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_spellcraft.jpg" title="disdain" alt="">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_whitemagic.jpg" title="never again" alt="">
<span id="txt"></span>
<span id="tit"></span>
<span id="lnk">
<a href="www.baidu.com"></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</span>
</div>
</div>
<span id="LB0" style="position:absolute;left:100%;top:100%;">
<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>

</body>

//

Javascript之响应式相册的更多相关文章

  1. 如何在Hexo中实现自适应响应式相册功能

    用最清晰简洁的方法整合一个响应式相册 效果 技术选型 由于我选用的主题使用了fancyBox作为图片弹出展示的框架,查看后表示很不错,能满足需要 http://fancyapps.com/fancyb ...

  2. 由浅入深，带你用JavaScript实现响应式原理（Vue2、Vue3响应式原理）

    由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...

  3. JavaScript辅助响应式

    js响应式 rem辅助响应式布局:其实就是指在HTML页面的大小不断变化的时候,里面的宽.高.字体等等也随之变化,主要是通过获取window.innerwidth的值来进行判断,7.5rem===10 ...

  4. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  5. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  7. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  8. 利用Bootstrap快速搭建个人响应式主页（附演示+源码）

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  9. CSS3 media queries + jQuery实现响应式导航

    目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM ...

随机推荐

  1. Epplus 使用的简单介绍

    操作Excel的主要有以下类库: MyXls(http://sourceforge.net/projects/myxls/) Koogra(http://sourceforge.net/project ...

  2. 赵雅智_ContentProvider

    ContentProvider介绍 ContentProvider是不同应用程序之间进行交换数据的标志API 也就是说:一个应用程序通过ContentProvider暴露自己的数据操作接口,那么无论该 ...

  3. 建立名称server

    一.实验的目的:     实现DNSserver功能,提供正向.反向解析 二.实验环境     装有Linux的Windows系统 IP为192.168.6.3的虚拟机 三.实验目的 建立gr.org ...

  4. QuickXdev+sublime text打造quick-cocos2d-x开发环境

    Sublime 插件安装方法: 一.简单的安装方法 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: import urllib.request, ...

  5. WIN8重见开始菜单

    从win7进入win8感觉不适应,做为一个程序开发人员,更觉得不爽,因此想着如何恢复开始菜单,查了很多文章终于找到方法 首先,在桌面版Windows 8启动资源管理器,单击工具栏上的“查看”选项卡后, ...

  6. 贪心算法(Greedy Algorithm)之最小生成树 克鲁斯卡尔算法(Kruskal&#39;s algorithm)

    克鲁斯卡尔算法(Kruskal's algorithm)是两个经典的最小生成树算法的较为简单理解的一个.这里面充分体现了贪心算法的精髓.大致的流程能够用一个图来表示.这里的图的选择借用了Wikiped ...

  7. Redis 字符串(String)

      Redis 字符串数据类型的相关命令用于管理 redis 字符串值,基本语法如下: 语法 redis 127.0.0.1:6379> COMMAND KEY_NAME 实例 redis 12 ...

  8. 基于MTD的NAND驱动开发、K9F1G08 2K page、Yaffs2 Files System

    转载:http://hi.baidu.com/cui1206/item/1d4119e376132513585dd886 基于MTD的NAND驱动(linux-2.6.22.10内核),目前已可以在该 ...

  9. The Romantic Hero

    Problem Description There is an old country and the king fell in love with a devil. The devil always ...

  10. css笔记08：id选择器之父子选择器

    1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...