<!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>西西里岛网页设计-特效代码</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#imageFlow {
position: absolute;
width: 100%;
height: 80%;
left: 0%;
top: 10%;
background: #000;
}
#imageFlow .diapo {
position: absolute;
left: -1000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #fff 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .bank {
visibility: hidden;
}
#imageFlow .top {
position: absolute;
width: 100%;
height: 40%;
background: #181818;
}
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: 16%;
text-align: center;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left: 10%;
bottom: 10%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#imageFlow .arrow-left {
position: absolute;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
}
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;
}
</style>
<script type="text/javascript">
var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
var flx = false;
if (document.createElement("canvas").getContext) {
flx = document.createElement("canvas");
flx.width = img.width;
flx.height = img.height;
var context = flx.getContext("2d");
context.translate(0, img.height);
context.scale(1, -1);
context.drawImage(img, 0, 0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height * 2);
} else {
/* ---- DXImageTransform ---- */
flx = document.createElement('img');
flx.src = img.src;
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
(img.height * .25) + ')';
}
/* ---- insert Reflexion ---- */
flx.style.position = 'absolute';
flx.style.left = '-1000px';
cont.appendChild(flx);
return flx;
}
/* //////////// ==== ImageFlow Constructor ==== //////////// */
function ImageFlow(oCont, size, zoom, border) {
this.diapos = [];
this.scr = false;
this.size = size;
this.zoom = zoom;
this.bdw = border;
this.oCont = oCont;
this.oc = document.getElementById(oCont);
this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');
this.text = getElementsByClass(this.oc, 'div', 'text');
this.title = getElementsByClass(this.text, 'div', 'title');
this.legend = getElementsByClass(this.text, 'div', 'legend');
this.bar = getElementsByClass(this.oc, 'img', 'bar');
this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');
this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');
this.bw = this.bar.width;
this.alw = this.arL.width - 5;
this.arw = this.arR.width - 5;
this.bar.parent = this.oc.parent = this;
this.arL.parent = this.arR.parent = this;
this.view = this.back = -1;
this.resize();
this.oc.onselectstart = function () { return false; }
/* ---- create images ---- */
var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img[i]; i++) {
this.diapos[i] = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== scrollbar drag N drop ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- move bar ---- */
this.parent.oc.onmousemove = function (e) {
if (!e) e = window.event;
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
if (self.view != self.back) self.calc();
return false;
}
/* ---- release scrollbar ---- */
this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
/* ==== targets ==== */
calc : function (inc) {
if (inc) this.view += inc;
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
if (o && o.loaded) {
/* ---- reset ---- */
var ob = this.diapos[this.back];
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}
/* ---- update legend ---- */
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x += o.w1 + this.bdw;
tw += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x -= o.w1 + this.bdw;
tw += o.w1 + this.bdw;
lw += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ----
超酷Javascript网页设计作品
4星 · 超过85%的资源 需积分: 46 36 浏览量
2009-01-01
01:41:41
上传
评论 6
收藏 1.31MB RAR 举报 
Javascript网页设计作品.rar （39个子文件） 
超酷Javascript网页代码 
6.html 3KB 16.html 6KB 5.html 9KB 9.html 3KB 14.html 4KB 8.html 4KB 7.html 15KB 2.html 7KB 4.html 7KB 13.html 8KB 11.html 7KB 3.html 8KB 15.html 726B images 
5.jpg 36KB 3.jpg 30KB 22.jpg 34KB 21.jpg 64KB 8.jpg 64KB 4.jpg 66KB 12.jpg 37KB 9.jpg 30KB 2.jpg 27KB 23.jpg 43KB 10.jpg 22KB 18.jpg 104KB 20.jpg 53KB 19.jpg 81KB 1.jpg 66KB 11.jpg 66KB 14.jpg 72KB 6.jpg 45KB
yuer.gif 18KB 15.jpg 126KB 17.jpg 89KB 16.jpg 61KB 7.jpg 108KB 13.jpg 15KB 1.html 10KB 12.html 6KB
xxldvs
- 粉丝: 0
- 资源: 2
最新资源
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序，冒泡排序，直接选择排序.zip
- 在排序2的基础上，再次对快排进行优化，其次增加快排非递归，归并排序，归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序（堆排序，归并排序，快速排序）一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序，并带图详解.zip
- 常用工具集参考用于图像等数据处理
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页