<!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';
10款震撼眼球的图片效果
需积分: 0 141 浏览量
2011-03-28
17:34:46
上传
评论
收藏 5.66MB RAR 举报
10款震撼眼球的图片效果 （145个子文件） 
index-v2.css 6KB Thumbs.db 54KB Thumbs.db 52KB Thumbs.db 48KB Thumbs.db 32KB Thumbs.db 29KB Thumbs.db 25KB Thumbs.db 23KB Thumbs.db 22KB Thumbs.db 21KB
sc.gif 1KB sl.gif 1KB sr.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
资源评论
18PI
- 粉丝: 20
- 资源: 10
最新资源
- 双H桥电机驱动L298N芯片AD集成库ALTIUM库（原理图库+PCB封装库)文件.zip
- 555springboot + vue 线上教学平台.zip（可运行源码+数据库文件+文档）
- 554springcloud + vue 房产销售平台.zip（可运行源码+数据库文件+文档）
- 小霸王坦克游戏源码.7z
- 蓝桥杯单片机基础学习项目（LED，数码管，蜂鸣器，继电器，按键控制）
- 553springboot + vue 某银行OA系统.zip（可运行源码+数据库文件+文档）
- DatabaseWatermarkingBasedonTextFormat
- yolov8常用二维码检测检测+数据集
- -移动通信-网络课程设计与研究
- 基于Python的PCA人脸识别算法的原理及实现代码+文档详解.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
