CSS之动态相册
2024-09-28 21:09:59
注释还是比较详细的，所以我就不一一再说明了。--->运行效果图<--- （点击之前温馨提示一下：此picture是我自己的照片，本来不想拿出来的，后来觉得反正不会有很多人看到而且也没人认识我所以厚着脸皮还是摊了出来）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AWFIDP</title> <style type="text/css">
html {
overflow: hidden;
} body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair; } #diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
} .imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
/* ==== 设置过滤器的透明度 ==== */
filter: alpha(opacity=50);
opacity: 0.9; } .spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
} .imgsrc {
position: absolute;
width: 300px;
height: 350px;
visibility: hidden;
margin: 4%;
} #bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
} </style> <script type="text/javascript">
var xm;
var ym; /* ==== 鼠标移动事件方法 ==== */
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
} /* ====调整窗口大小==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize; /* ==== 不透明度 ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
} /* ===== 封装脚本 ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0, /* ==== 脚本属性 ==== */
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18, /* ==== 使用Diapo调整大小 ==== */
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
}, /* ==== 加载jQuery插件Diapo ==== */
CDiapo : function(o){
/* ==== 输入变量 ==== */
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false; /* ==== 创造"影子" ==== */
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa); /* ==== 创建小图片 ==== */
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency); /* ====鼠标事件 ==== */
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}
} /* ==== 调整图片位置 ==== */
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
} /* ==== 动画方法 ==== */
this.position = function (){
with (this) {
/* ==== 设置目标位置 ==== */
w_target = w_origin;
h_target = h_origin;
if(over){
/* ====鼠标结束时 ==== */
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
/* ==== 鼠标完成时 ==== */
x_target = x_origin;
y_target = y_origin;
}
if(click){
/* ==== 点击时 ==== */
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
} /* ==== 特效 ==== */
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var)); /* ==== 页面动画 ==== */
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
}, /* ==== 主要循环 ==== */
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
/* ==== 动画标题 ==== */
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
/* ==== anim图片 ==== */
for(var i in diapo.O) diapo.O[i].position();
/* ==== 循环 ==== */
setTimeout("diapo.run();", 16);
}, /* ==== 图片装载 ==== */
images_load : function(){
// ===== 所有图片装载完成停止循环 =====
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 8);
}, /* ==== 初始化方法==== */
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
} </script>
</head> <body> <div id="diapoContainer"> <img class="imgsrc" src="img/1.jpg" alt="">
<img class="imgsrc" src="img/2.jpg" alt="">
<img class="imgsrc" src="img/3.jpg" alt="">
<div id="bkgcaption"></div>
<div id="caption"></div>
</div> <script type="text/javascript">
/* ==== 开始脚本 ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 8);
}
dom_onload();
</script>
</div>
</body>
</html>
点击查看我做的效果图：
最新文章
- Visual Studio.NET单选题
- gulp插件gulp-ruby-sass和livereload插件
- 深入JVM-有关String的内存泄漏
- asp.net Routing 用法
- 【UGUI】Canvas和Rect Transform
- 《Linux内核设计的艺术》学习笔记（一）从开机加电到加载三个汇编源码
- Cloudera hadoop-2.3.0-cdh5.1.0 在Centos 6.5 下的安装
- Linux管道通信
- Nginx下编译PHP+Mysql
- 【原】Java学习笔记032 - 多线程
- MySQL8主从配置
- vue开发中regeneratorRuntime is not defined
- [转]mysql大表更新sql的优化策略
- 静态工厂 + DbHelper
- 视频转换ffmpeg
- python Thread对象的setDaemon(True)的作用。
- P3868 [TJOI2009]猜数字
- 线程TLAB局部缓存区域（Thread Local Allocation Buffer）
- nginx对nodejs服务器的http、https、ws、wss的配置
- 03_java之基本语法