<!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. ecshop支持手机号码登录、邮箱登录

    修改 User.php  文件找到: if ($user->login($username, $password,isset($_POST['remember']))) 在它上边增加一段我们所要 ...

  2. [置顶] stax解析xml文档的6种方式

    原文链接:http://blog.csdn.net/u011593278/article/details/9745271 stax解析xml文档的方式: 基于光标的查询: 基于迭代模型的查找: 基于过 ...

  3. Date、String、Calendar、Timestamp类型之间的转化

    1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...

  4. stm32上的Lava虚拟机开发进度汇报（2）

    现在已经基本完成了Lava主要函数的编写,但还是有几个问题没解决: 1.实心圆和实心椭圆 2.FillArea 3.GetWord 其中FillArea如果没有很好的解决方法就算了,GetWord用g ...

  5. Codeforces Gym 100342J Problem J. Triatrip bitset 求三元环的数量

    Problem J. TriatripTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100342/att ...

  6. 数据挖掘十大经典算法(9) 朴素贝叶斯分类器 Naive Bayes

    贝叶斯分类器 贝叶斯分类器的分类原理是通过某对象的先验概率,利用贝叶斯公式计算出其后验概率,即该对象属于某一类的概率,选择具有最大后验概率的类作为该对象所属的类.眼下研究较多的贝叶斯分类器主要有四种, ...

  7. Android PhoneGap源码分析——白名单

    对于单独的Web app应用来说,加载进来的url一般不能保证它的安全性.那么如何来处理url安全性的问题呢. 让我们来看看PhoneGap是如何做的. PhoneGap采用了白名单的形式,认为在白名 ...

  8. cvsnt 设置用户、修改密码

    忘记密码后,可以用administrator 新建一个用户,使用这个用户的账号. password agent 设置clear password不好使..   cvsnt配置 创建用户1 .下载cvs ...

  9. Hidden Markov Model

    Markov Chain 马尔科夫链(Markov chain)是一个具有马氏性的随机过程,其时间和状态参数都是离散的.马尔科夫链可用于描述系统在状态空间中的各种状态之间的转移情况,其中下一个状态仅依 ...

  10. Expectation Maximization and GMM

    Jensen不等式 Jensen不等式给出了积分的凸函数值必定大于凸函数(convex)的积分值的定理.在凸函数曲线上的任意两点间连接一条线段,那么线段会位于曲线之上,这就是将Jensen不等式应用到 ...