Trình diễn ảnh kute(bước 1)

itle, this.title.firstChild; this.legend.replaceChilddocument.createTextNode.

Bước 1 : copy đoạn script sau dán vào thẻ head

PHP Code:

<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( [ ]);

if (ret.length == 1 ret = ret[ ];

return ret;

}

function ađEvent ( , e f) {

if (window.ađEventListener) o ađEventListener( , 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( , img.height);

context.scale( , -1);

context.drawImage(img, 0 0 img.width, img.height); context.globalCompositeOperation = "destination-out"; var gradient = context.createLinearGradient( , 0 0 im

g height * 2);

gradient.ađColorStop( , "rgbă255, 255, 255, 0)"); gradient.ađColorStop( , "rgbă255, 255, 255, 1)"); context.fillStyle = gradient;

context.fillRect( , 0 img.width, img.height * 2); } else {

/* DXImageTransform */

flx = document.createElement('img');

flx.src = img.src;

flx.stylẹfilter = 'flipv progid:DXImageTransform.Micro soft.Alphắ +

'opacity=50, style=1, finishOpacity=

0, startx=0, starty=0, finishx=0, finishy=' +

(img.height * 25) + ')';

}

/* insert Reflexion */

flx.stylẹposition = 'absoluté;

flx.stylẹ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', 'scr ollbar');

this.text = getElementsByClass(this.oc, 'div', 'tex t');

this.title = getElementsByClass(this.text, 'div', 'tit le');

this.legend = getElementsByClass(this.text, 'div', 'leg end');

this.bar = getElementsByClass(this.oc, 'img', 'bar ');

this.arL = getElementsByClass(this.oc, 'img', 'arr ow-left');

this.arR = getElementsByClass(this.oc, 'img', 'arr ow-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').getE lementsByTagName('a');

this.NF = img.length;

for (var i = 0 o o = img[ ]; i++) {

this.diapos[ ] = 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( );

}

/* ==== 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( itle), this.title.firstChild);

this.legend.replaceChild(document.createTextNode( 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( 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++) {

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 ) {

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( );

} 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[ ].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 () { this.className = ' diapo link'; }

this.img.onmouseout = function () { this.className = ' diapo'; }

}

}

/* //////////// ==== 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 ;

/* 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( ) + '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( ) + 'px';

}

} else {

/* disable invisible images */

if (this.visible) {

this.visible = false;

this.img.style.width = '0px';

if (this.flx) this.flx.style.width = '0 px';

}

}

}

} 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, t his.img);

if (this.parent.view < 0 this.parent.view = th

is ;

this.parent.calc();

}

}

},

/* ==== diapo onclick ==== */

click : function () {

if (this.parent.view == this ) {

/* 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 ;

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[ ].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[ ].resize(); });

/* stop drag N drop */

addEvent(document.getElementById(div), 'mou seout', 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[ ].oc.onmousemove = null; }

return false; });

/* set interval loop */

setInterval(function () { var i = instances.length; while (i ) instances[ ].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>