<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>1</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 ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
十款超炫的页面（简单的js做出超炫的页面效果） （145个子文件） 
index-v2.css 6KB Thumbs.db 26KB Thumbs.db 25KB Thumbs.db 23KB Thumbs.db 22KB Thumbs.db 21KB Thumbs.db 17KB Thumbs.db 16KB Thumbs.db 15KB Thumbs.db 11KB
sc.gif 1KB sr.gif 1KB sl.gif 1KB bumps3.gif 934B bumps2.gif 916B sb.gif 900B index.htm 8KB
index.html 15KB index.html 10KB index.html 10KB index.html 9KB index.html 8KB index.html 7KB index.html 7KB index.html 6KB index.html 3KB
spellcraft.jpg 142KB pyre.jpg 136KB wi2.jpg 120KB ct60.jpg 115KB 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 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 earth.jpg 63KB sf53.jpg 62KB ct65.jpg 61KB sf41.jpg 58KB sf10.jpg 58KB wi23.jpg 57KB ct81.jpg 56KB ct137.jpg 55KB or27.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 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 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 or4.jpg 40KB or14.jpg 40KB or1.jpg 40KB conspiracy_22.jpg 38KB wi35.jpg 37KB conspiracy_24.jpg 37KB singularity.jpg 37KB conspiracy_17.jpg 37KB wi33.jpg 36KB wi27.jpg 36KB wt25.jpg 35KB共 145 条
- 1
- 2
资源评论
zjfctao2012-10-22不错，很实用，效果很好
orange大数据技术探索者2018-10-30效果还是听选的
llm4akkarl2012-07-11效果挺玄的~有思路了~我最近在想办法把一些前台效果引入到机顶盒平台~这个不错- jiushiwang2012-10-31很有创意~效果很好~非常感谢！
ghfjdksla
- 粉丝: 3
- 资源: 2
最新资源
- comsol双温模型半导体 飞秒激光
- 直流微电网混合储能模型simulink仿真 (超级电容、锂电池组成的混合储能系统，混合储能系统采用双向DC-DC变器与直流母线连
- IP-ISP (图像信号处理) 产品介绍 ISP实现了对图像的bayer转RGB、自动白平衡、自动曝光、自动对焦评估、坏点去除、
- COMSOL【电磁-流-热耦合】仿真 comsol平台下的变压器二维模型的电磁-流-热耦合仿真，仿真效果如下所示 计算
- 混合储能系统 光储微网 下垂控制 Simulink仿真 注意版本2021A以上 由光伏发电系统和混合储能系统构成直流微网
- Python与SQLite构建学生管理系统
- 王兆安电力电子技术全仿真 第3章 整流电路 1. 单相半波可控整流电路电阻负载 2. 单相半波可控整流电路电阻电感负载 3. 单
- comsol激光熔覆耦合超声
- 中国食品药品安全监督前景与展望.docx
- Python批量处理学生学业成绩单计算平均分
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
