<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>9</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" src="dhteumeuleu.js"></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 = path + images[k][0];
/* ==== set image variables ==== */
s.x = x;
s.y = y;
s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
s.x1 = x * (this.nw / this.NX);
s.y1 = y * (this.nh / this.NY);
s.w0 = 0;
s.h0 = 0;
s.w1 = 0;
s.h1 = 0;
s.V = 0;
s.t = images[k][1];
s.T = false;
/* ==== function move image ==== */
s.move = function() {
/* ==== position images ==== */
this.style.left = px(this.x0 += (this.x1 - this.x0) * diap.SP);
this.style.top = px(this.y0 += (this.y1 - this.y0) * diap.SP);
this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP);
this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);
if (this != diap.S) {
/* ==== set image background color ==== */
if (Math.abs(this.w1 - this.w0) > 1) {
var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));
this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');
}
if (this == diap.V) {
/* ==== on mouseover: fade in ==== */
if (this.V < 100) this.img.setOpacity(this.V += 5);
} else {
/* ==== fade out ==== */
if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);
}
}
/* ==== text effect ==== */
if (this.T) this.dispLabel();
}
/* ==== display text function (typewriter FX) ==== */
s.dispLabel = function() {
if (diap.G || diap.S == this) {
/* ==== zoomed image ==== */
this.T.style.left = px(this.x0);
this.T.style.top = px(this.y0);
this.T.style.width = px(this.w0);
} else {
/* ==== calculate text position ==== */
var xt = diap.S.x0 + this.w0 + diap.BR;
if (this.y == diap.Y) {
this.T.style.top = px(this.y0 - this.f - diap.BR);
if (this.y == 0) var xt = diap.S.x0;
} else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));
if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);
else this.T.style.left = px(xt);
if (this != diap.V) {
/* ==== text type out ==== */
this.Tp--;
this.T.innerHTML = this.t.substring(0, this.Tp);
if (this.Tp < 1) {
diap.scr.removeChild(this.T);
this.T = false;
}
} else {
if (this.Tp < this.t.length) {
/* ==== text type in ==== */
this.Tp++;
this.T.innerHTML = this.t.substring(0, this.Tp);
}
}
}
}
/* ==== create text function ==== */
s.createLabel = function () {
this.T = document.createElement('div');
this.T.className = 'label';
if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';
this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
if(this == diap.S) {
this.f *= 2;
this.T.style.background = 'none';
this.T.style.textAlign = 'center';
}
this.T.style.fontSize = ''.concat(this.f, 'px');
this.T.innerHTML = this.t;
this.T.style.left = px(-1000);
th
震惊的图片轮播js效果
5星 · 超过95%的资源 需积分: 15 59 浏览量
2011-06-25
17:01:50
上传
评论
收藏 6.64MB RAR 举报 
震惊的图片轮播js效果 （160个子文件） 
index-v2.css 6KB css.css 1KB Thumbs.db 43KB Thumbs.db 8KB
sc.gif 1KB sc.gif 1KB sr.gif 1KB sl.gif 1KB sr.gif 1KB sl.gif 1KB bumps3.gif 934B bumps2.gif 916B sb.gif 900B sb.gif 900B index.htm 8KB
index.html 10KB index.html 10KB index.html 9KB index.html 8KB index.html 7KB index.html 7KB index.html 6KB index.html 3KB index.html 3KB
46.jpg 186KB 1.jpg 182KB spellcraft.jpg 142KB pyre.jpg 136KB wi2.jpg 120KB ct60.jpg 115KB ct60.jpg 115KB ct139.jpg 109KB ct139.jpg 109KB wt35.jpg 95KB rd101.jpg 95KB whitemagic.jpg 92KB wt47.jpg 87KB bl117.jpg 85KB wi21.jpg 83KB gazebo2k3.jpg 81KB rd103.jpg 78KB ct37.jpg 77KB ct37.jpg 77KB wi11.jpg 76KB wt19.jpg 74KB wt43.jpg 73KB newborn.jpg 72KB wt14.jpg 72KB sf14.jpg 72KB gr68.jpg 68KB wi20.jpg 67KB wt48.jpg 67KB wi30.jpg 65KB wi3.jpg 65KB ct134.jpg 63KB ct134.jpg 63KB earth.jpg 63KB sf53.jpg 62KB sf53.jpg 62KB ct65.jpg 61KB ct65.jpg 61KB sf41.jpg 58KB sf10.jpg 58KB wi23.jpg 57KB ct81.jpg 56KB ct81.jpg 56KB ct137.jpg 55KB ct137.jpg 55KB or27.jpg 55KB sf48.jpg 55KB sf48.jpg 55KB wt46.jpg 55KB majesty.jpg 54KB wt21.jpg 53KB wt06.jpg 53KB wi7.jpg 53KB sf26.jpg 51KB ct27.jpg 51KB ct27.jpg 51KB wi29.jpg 50KB gr66.jpg 50KB wi42.jpg 48KB sf19.jpg 48KB or33.jpg 47KB conspiracy_32.jpg 47KB bl116.jpg 46KB or105.jpg 46KB or105.jpg 46KB or66.jpg 46KB conspiracy_29.jpg 46KB pil.jpg 46KB bl112.jpg 45KB or39.jpg 45KB sf01.jpg 44KB wt53.jpg 44KB wt40.jpg 43KB sf50.jpg 42KB conspiracy_26.jpg 42KB wi37.jpg 41KB ct41.jpg 41KB共 160 条
- 1
- 2
深黑色的猫
- 粉丝: 36
- 资源: 54
最新资源
- pta题库答案c语言之排序4统计工龄.zip
- pta题库答案c语言之树结构7堆中的路径.zip
- pta题库答案c语言之树结构3TreeTraversalsAgain.zip
- pta题库答案c语言之树结构2ListLeaves.zip
- pta题库答案c语言之树结构1树的同构.zip
- 基于C++实现民航飞行与地图简易管理系统可执行程序+说明+详细注释.zip
- pta题库答案c语言之复杂度1最大子列和问题.zip
- 三维装箱问题（Three-Dimensional Bin Packing Problem,3D-BPP）是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
- 以下是一个简化的示例，它使用pygame库来模拟烟花动画的框架.txt
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页