this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih / this.iw; this.loaded = true; /* ---- create reflexion ---- */ this.flx = createReflexion(this.parent.oc, this.img); if (this.parent.view < 0) this.parent.view = this.N; this.parent.calc(); } } }, /* ==== diapo onclick ==== */ click : function () { if (this.parent.view == this.N) { /* ---- click on zoomed diapo ---- */ if (this.url) { /* ---- open hyperlink ---- */ window.open(this.url, this.target); } else { /* ---- zoom in/out ---- */ this.z1 = this.z1 == 1 ? this.parent.zoom : 1; this.parent.calc(); } } else { /* ---- select diapo ---- */ this.parent.view = this.N; this.parent.calc(); } return false; } } /* //////////// ==== public methods ==== //////////// */ return { /* ==== initialize script ==== */ create : function (div, size, zoom, border) { /* ---- instanciate imageFlow ---- */ var load = function () { var loaded = false; var i = instances.length; while (i--) if (instances[i].oCont == div) loaded = true; if (!loaded) { /* ---- push new imageFlow instance ---- */ instances.push( new ImageFlow(div, size, zoom, border) ); /* ---- init script (once) ---- */ if (!imf.initialized) { imf.initialized = true; /* ---- window resize event ---- */ addEvent(window, 'resize', function () { var i = instances.length; while (i--) instances[i].resize(); }); /* ---- stop drag N drop ---- */ addEvent(document.getElementById(div), 'mouseout', function (e) { if (!e) e = window.event; var tg = e.relatedTarget || e.toElement; if (tg && tg.tagName == 'HTML') { var i = instances.length; while (i--) instances[i].oc.onmousemove = null; } return false; }); //auto run loop //myvicy 08 04.8 if(canAutorun)setInterval(function(){ var i = instances.length; while (i--) instances[i].autorun(direction); },intervaltime); /* ---- set interval loop ---- */ setInterval(function () { var i = instances.length; while (i--) instances[i].run(); }, 16); } } } /* ---- window onload event ---- */ addEvent(window, 'load', function () { load(); }); } } }();/* ==== create imageFlow ==== */ // div ID , size, zoom, border imf.create("imageFlow", 0.15, 1.5, 10); </script> </head>
<body> <div id="imageFlow"> <div class="top"></div> <div class="bank"> <a rel="ct37.jpg" title="Myselves" href="http://www.design-studio.cn/">My identity lies in not knowing who I am</a> <a rel="ct60.jpg" title="Discoveries" href="http://www.design-studio.cn/">...are made by not following instructions</a> <a rel="sf53.jpg" title="Nothing" href="http://www.design-studio.cn/">...can come between us</a> <a rel="sf48.jpg" title="New life" href="http://www.design-studio.cn/">Here you come!</a> <a rel="ct81.jpg" title="Optimists" href="http://www.design-studio.cn/">They don't know all the facts yet</a> <a rel="ct134.jpg" title="Empathy" href="http://www.design-studio.cn/">Emotional intimacy</a> <a rel="ct41.jpg" title="Much work" href="http://www.design-studio.cn/">...remains to be done before we can announce our total failure to make any progress</a> <a rel="ct75.jpg" title="System error" href="http://www.design-studio.cn/">Errare Programma Est</a> <a rel="bl201.jpg" title="Nonexistance" href="http://www.design-studio.cn/">There's no such thing</a> <a rel="ct137.jpg" title="Inside" href="http://www.design-studio.cn/">I抦 now trapped, without hope of escape or rescue</a> <a rel="ct65.jpg" title="E-Slaves" href="http://www.design-studio.cn/">The World is flat</a> <a rel="or105.jpg" title="l0v3" href="http://www.design-studio.cn/">1 l0v3 j00 - f0r3v3r</a> <a rel="ct139.jpg" title="T minus zero" href="http://www.design-studio.cn/">111 111 111 x 111 111 111 = 12345678987654321</a> <a rel="ct27.jpg" title="The End" href="http://www.design-studio.cn/">...has not been written yet</a> </div> <div class="text"> <div class="title">Loading</div> <div class="legend">Please wait...</div> </div> <div class="scrollbar"> <img class="track" src="sb.gif" alt=""> <img class="arrow-left" src="sl.gif" alt=""> <img class="arrow-right" src="sr.gif" alt=""> <img class="bar" src="sc.gif" alt=""> </div> </div> </body> </html>
这个我能看懂啊~ 可是怎么让他既能点击又能自动滚动呢? 里面写了很多的 while(i--){...}不懂怎么自动滚动 麻烦指点一二 谢谢
<!-- png透明代码-->
<script>
function isPNG(picname)
{
var imgName = picname.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
return true;
}
else
{
return false;
}
}
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);</script><!-- png透明代码结束-->
我改了放到这个程序里面 在Diapo = function (parent, N, src, title, text, url, target) {部分
Diapo = function (parent, N, src, title, text, url, target) {
this.parent = parent;
this.loaded = false;
this.title = title;
this.text = text;
this.url = url;
this.target = target;
this.N = N;
//this for src to do operate the img or span for offer PNG
if(isPNG(src))
{
//isPNG
this.img = document.createElement('img');
this.img.src = src;
this.img.parent = this;
this.img.className = 'diapo';
var imgID = (this.img.id) ? "id='" + this.img.id + "' " : ""
var imgClass = (this.img.className) ? "class='" + this.img.className + "' " : ""
var imgTitle = (this.img.title) ? "title='" + this.img.title + "' " : "title='" + this.img.alt + "' "
var imgStyle = "display:inline-block;" + this.img.style.cssText
if (this.img.align == "left") imgStyle = "float:left;" + imgStyle
if (this.img.align == "right") imgStyle = "float:right;" + imgStyle
if (this.img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + this.img.width + "px; height:" + this.img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + this.img.src + "', sizingMethod='scale');\" id="span_"+"+N+"></span>"
this.img.outerHTML = strNewHTML
}
else
{
this.img = document.createElement('img');
this.img.src = src;
this.img.parent = this;
this.img.className = 'diapo';
}
this.x0 = this.parent.oc.clientWidth;
this.x1 = this.x0;
this.w0 = 0;
this.w1 = 0;
this.z1 = 1;
this.img.parent = this;
this.img.onclick = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
if(isPNG(src))
{
this.parent.oc.appendChild(document.getElementById("span_"+N));
}
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout = function () { this.className = 'diapo'; }
}
}
请教有问题 图片全部不显示了~~~ 晕乎
function isPNG(picname)
{
var imgName = picname.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
return true;
}
else
{
return false;
}
}
再就是他宽高是随时都在变化的 还有投影。 天那~ 兼容一下 再加上自动滚动 这么难吗?? 有高手在研究吗? 一起研究下吧! 谢谢
var canAutorun = true;//true 表示自动运行,反之亦反之
var intervaltime = 1000;//间隔时间,毫秒
var direction = -1 ;//1表示向右滚动,-1表示向左滚动
var turn = !false;//true 表示直接转向,false表示循环,默认循环
autorun方法:根据参数自动运行.
[code=HTML]<!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 = [];
//auto run contrl parm//myvicy 08 04.8
var canAutorun = true;//true 表示自动运行,反之亦反之
var intervaltime = 1000;//间隔时间,毫秒
var direction = -1 ;//1表示向右滚动,-1表示向左滚动
var turn = !false;//true 表示直接转向,false表示循环,默认循环
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 () {
direction = 1;
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
direction = -1;
if (this.parent.view > 0)
this.parent.calc(-1);
}
//auto run stop //myvicy 08 04.8
this.bar.onmouseover = this.arR.onmouseover = this.arL.onmouseover = function(){canAutorun = false}
this.bar.onmouseout = this.arR.onmouseout = this.arL.onmouseout = function(){canAutorun = true}
}[code]
var canAutorun = true;//true 表示自动运行,反之亦反之
var intervaltime = 1000;//间隔时间,毫秒
var direction = -1 ;//1表示向右滚动,-1表示向左滚动
var turn = !false;//true 表示直接转向,false表示循环,默认循环
autorun方法:根据参数自动运行.
更改了方向单击事件,单击后根据目前方向改向.滚动bar类似.
添加鼠标悬停
<!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 = [];
//auto run contrl parm//myvicy 08 04.8
var canAutorun = true;//true 表示自动运行,反之亦反之
var intervaltime = 1000;//间隔时间,毫秒
var direction = -1 ;//1表示向右滚动,-1表示向左滚动
var turn = !false;//true 表示直接转向,false表示循环,默认循环
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();
//auto run contrl //myvicy 08 04.8
direction=self.view>self.back?1:-1;
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 () {
//auto run contrl //myvicy 08 04.8
direction = 1;
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
//auto run contrl //myvicy 08 04.8
direction = -1;
if (this.parent.view > 0)
this.parent.calc(-1);
}
//auto run stop //myvicy 08 04.8
this.bar.onmouseover = this.arR.onmouseover = this.arL.onmouseover = function(){canAutorun = false}
this.bar.onmouseout = this.arR.onmouseout = this.arL.onmouseout = function(){canAutorun = true}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
/* ==== targets ==== */
autorun : function (inc){if(canAutorun)this.calc(inc);},
calc : function (inc) {
//auto run contrl //myvicy 08 04.8
if (inc) this.view += inc;
if(this.view>=this.diapos.length)this.view=turn?(direction=-direction,this.diapos.length-1):0
if(this.view<0)this.view=turn?(direction=-direction,0):this.diapos.length-1
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
/* ---- 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';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
this.parent = parent;
this.loaded = false;
this.title = title;
this.text = text;
this.url = url;
this.target = target;
this.N = N;
this.img = document.createElement('img');
this.img.src = src;
this.img.parent = this;
this.img.className = 'diapo';
this.x0 = this.parent.oc.clientWidth;
this.x1 = this.x0;
this.w0 = 0;
this.w1 = 0;
this.z1 = 1;
this.img.parent = this;
this.img.onclick = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { canAutorun = false;this.className = 'diapo link'; }
this.img.onmouseout = function () { canAutorun = true;this.className = 'diapo'; }
}else{
//auto run stop //myvicy 08 04.8
this.img.onmouseover = function(){canAutorun = false;};
this.img.onmouseout = function(){canAutorun = true;};
}
}
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
/* ==== HTML rendering ==== */
move : function (res) {
if (this.loaded) {
var sx = this.x1 - this.x0;
var sw = this.w1 - this.w0;
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
/* ---- paint only when moving ---- */
this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
/* ---- paint only visible images ---- */
this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;
/* ---- diapo ---- */
o.left = Math.round(this.x0) + 'px';
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
/* ---- reflexion ---- */
if (this.flx) {
var o = this.flx.style;
o.left = Math.round(this.x0) + 'px';
o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
}
} else {
/* ---- disable invisible images ---- */
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.iw = this.img.width;
this.ih = this.img.height;
this.r = this.ih / this.iw;
this.loaded = true;
/* ---- create reflexion ---- */
this.flx = createReflexion(this.parent.oc, this.img);
if (this.parent.view < 0) this.parent.view = this.N;
this.parent.calc();
}
}
},
/* ==== diapo onclick ==== */
click : function () {
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}
}
/* //////////// ==== public methods ==== //////////// */
return {
/* ==== initialize script ==== */
create : function (div, size, zoom, border) {
/* ---- instanciate imageFlow ---- */
var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances[i].oCont == div) loaded = true;
if (!loaded) {
/* ---- push new imageFlow instance ---- */
instances.push(
new ImageFlow(div, size, zoom, border)
);
/* ---- init script (once) ---- */
if (!imf.initialized) {
imf.initialized = true;
/* ---- window resize event ---- */
addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances[i].resize();
});
/* ---- stop drag N drop ---- */
addEvent(document.getElementById(div), 'mouseout', function (e) {
if (!e) e = window.event;
var tg = e.relatedTarget || e.toElement;
if (tg && tg.tagName == 'HTML') {
var i = instances.length;
while (i--) instances[i].oc.onmousemove = null;
}
return false;
});
//auto run loop //myvicy 08 04.8
if(canAutorun)setInterval(function(){
var i = instances.length;
while (i--) instances[i].autorun(direction);
},intervaltime);
/* ---- set interval loop ---- */
setInterval(function () {
var i = instances.length;
while (i--) instances[i].run();
}, 16);
}
}
}
/* ---- window onload event ---- */
addEvent(window, 'load', function () { load(); });
}
}
}();/* ==== create imageFlow ==== */
// div ID , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);
</script>
</head>
<body>
<div id="imageFlow">
<div class="top"></div>
<div class="bank">
<a rel="ct37.jpg" title="Myselves" href="http://www.design-studio.cn/">My identity lies in not knowing who I am</a>
<a rel="ct60.jpg" title="Discoveries" href="http://www.design-studio.cn/">...are made by not following instructions</a>
<a rel="sf53.jpg" title="Nothing" href="http://www.design-studio.cn/">...can come between us</a>
<a rel="sf48.jpg" title="New life" href="http://www.design-studio.cn/">Here you come!</a>
<a rel="ct81.jpg" title="Optimists" href="http://www.design-studio.cn/">They don't know all the facts yet</a>
<a rel="ct134.jpg" title="Empathy" href="http://www.design-studio.cn/">Emotional intimacy</a>
<a rel="ct41.jpg" title="Much work" href="http://www.design-studio.cn/">...remains to be done before we can announce our total failure to make any progress</a>
<a rel="ct75.jpg" title="System error" href="http://www.design-studio.cn/">Errare Programma Est</a>
<a rel="bl201.jpg" title="Nonexistance" href="http://www.design-studio.cn/">There's no such thing</a>
<a rel="ct137.jpg" title="Inside" href="http://www.design-studio.cn/">I抦 now trapped, without hope of escape or rescue</a>
<a rel="ct65.jpg" title="E-Slaves" href="http://www.design-studio.cn/">The World is flat</a>
<a rel="or105.jpg" title="l0v3" href="http://www.design-studio.cn/">1 l0v3 j00 - f0r3v3r</a>
<a rel="ct139.jpg" title="T minus zero" href="http://www.design-studio.cn/">111 111 111 x 111 111 111 = 12345678987654321</a>
<a rel="ct27.jpg" title="The End" href="http://www.design-studio.cn/">...has not been written yet</a>
</div> <div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</div>
<div class="scrollbar">
<img class="track" src="sb.gif" alt="">
<img class="arrow-left" src="sl.gif" alt="">
<img class="arrow-right" src="sr.gif" alt="">
<img class="bar" src="sc.gif" alt="">
</div>
</div>
</body>
</html>
关于IE6的PNG图片透明的处理有办法吗?指点一下 谢谢
地址:http://qc268.msii.cn/stage/?cateid=227