减小字体
增大字体- ·上一篇文章：图片特效：鼠标滑过，图片放大显示
- ·下一篇文章：图片特效：影布效果展示图片
图片特效：具有绅士风度的图片展示效果
：2010-12-05 15:55:40
当一个图片被选中后，其他图片会退居幕后，多么具有绅士风度啊
源代码如下：
<!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=gb2312" />
<title>翔宇亭—图片特效—我们需要绅士 - 网页特效-|k88.net|</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
top: 1%;
left: 1%;
width: 98%;
height: 98%;
background: #000;
color: #fff;
}
#screen div {
position: absolute;
overflow: hidden;
cursor: pointer;
}
#screen img {
position: absolute;
width: 100%;
height: 100%;
}
#screen .label {
position: absolute;
color: #FFF;
background: #000;
font-family: arial;
white-space: no-wrap;
}
</style>
<!-- dhteumeuleu utilities -->
<script type="text/javascript">
// ================================
// DHTML mini library
// Gerard Ferrandez - January 2007
// http://www.dhteumeuleu.com
// ================================
id = function(o) {
return document.getElementById(o);
}
px = function (x) {
return ''.concat(Math.round(x), 'px');
}
pxLeft = function(o) {
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetLeft;
return x;
}
pxTop = function(o) {
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetTop;
return x;
}
/* ==== DOM 2 add event ==== */
addEvent = function (o, e, f) {
var r = false;
if (window.addEventListener) {
o.addEventListener(e, f, false);
r = true;
} else if (window.attachEvent) {
r = o.attachEvent('on' + e, f);
}
return r;
}
</script>
<script type="text/javascript">
// ========================================================
// ====== Javascript Slideshow ======
// script written by Gerard Ferrandez - December 31, 2006
// http://www.dhteumeuleu.com/
// ========================================================
var diap = {
/////////////////////////////////
BR : 3, // border size in px
ZR : .75, // zoom ratio
SP : .1, // speed
/////////////////////////////////
V : false,
S : false,
G : true,
resize : function () {
/* ==== window resize event ==== */
diap.nw = diap.scr.offsetWidth;
diap.nh = diap.scr.offsetHeight;
diap.nwu = (diap.nw * diap.ZR);
diap.nhu = (diap.nh * diap.ZR);
diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt);
if (diap.N) {
diap.setPosition();
if (!diap.G) diap.delLabels();
}
},
setPosition : function () {
/* ==== calculate image target position ==== */
var k = 0;
var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;
for (var j = 0; j < this.NY; j++) {
var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;
for (var i = 0; i < this.NX; i++) {
var o = this.spa[k++];
o.y1 = y;
o.x1 = x;
o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);
}
y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);
}
},
delLabels : function () {
/* ==== remove texts ==== */
for ( var i = 0; i < diap.N; i++) {
var o = diap.spa[i];
if (o.T) diap.scr.removeChild(o.T);
o.T = false;
}
},
run : function () {
/* ==== main loop ==== */
for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
setTimeout(diap.run, 16);
},
init : function (container, NX, NY, path, images) {
/* ==== initialize script ==== */
this.scr = id(container);
if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
this.NX = NX;
this.NY = NY;
this.spa = {};
this.resize();
var k = 0;
for (var y = 0; y < this.NY; y++) {
for (var x = 0; x < this.NX; x++) {
/* ==== create HTML elements ==== */
var s = this.spa[k] = document.createElement('div');
s.img = document.createElement('img');
/* ==== opacity optimized function ==== */
s.img.setOpacity = function (alpha) {
if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
if (alpha == 100) {
/* ==== speed opt - remove IE filter ==== */
this.style.visibility = 'visible';
this.style.filter = '';
this.style.opacity = 1;
return 100;
} else if (alpha == 0) {
/* ==== hide image, remove opacity ==== */
this.style.visibility = 'hidden';
this.style.filter = '';
this.style.opacity = 0;
return 0;
}
if (this.filters) {
/* ==== IE filter ==== */
if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';
else this.filters.alpha.opacity = alpha;
/* ==== CSS opacity ==== */
} else this.style.opacity = alpha * .01;
return alpha;
}
s.img.src = id('loading').src;
s.appendChild(s.img);
this.scr.appendChild(s);
/* ==== pre-load image ==== */
s.pre = new Image();
s.pre.obj = s;
s.pre.onload = function() { this.obj.img.src = this.src; }
s.pre.src = pat
图片特效：具有绅士风度的图片展示效果
