Tip: You can modify some of the code before running
Very personalized JS album picture display effect code <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> very personalized JS album picture display effect code </title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead Between >--> <style type= "text/css" > HTML {overflow:hidden;} body {margin:0px; padding:0px; Background: #000; Position:absolute; width:100%; height:100%; Cursor:crosshair; } #diapoContainer {Position:absolute; left:10%; top:10%; width:80%; height:80%; Background: #222; Overflow:hidden; }. IMGDC {position:absolute; Cursor:pointer; border: #000 solid 2px; Filter:alpha (opacity=90); opacity:0.9; Visibility:hidden; }. spadc {position:absolute; Filter:alpha (OPACITY=20); opacity:0.2; Background: #000; Visibility:hidden; }. imgsrc {position:absolute; width:120px; height:67px Visibility:hidden; margin:4%; } #bkgcaption {Position:absolute; bottom:0px; left:0px; width:100%; height:6%; Background: #1a1a1a; } #caption {Position:absolute; Font-family:arial, Helvetica, Verdana, Sans-serif; White-space:nowrap; Color: #fff; bottom:0px; width:100%; Left: -10000px; Text-align:center; } </style> <script type= "Text/javascript" > var xm; var ym; * = = = = = = = OnMouseMove Event = =/Document.onmousemove = function (e) {if (window.event) e=window.event; XM = (e.x | | e.clientx); YM = (E.y | | e.clienty); /* = = = = = = = = = = = = = = = = Resize = =/function resize () {if (Diapo) diapo.resize (); onresize = resize; /* = = = = = = Opacity =/setopacity = function (o, alpha) {if (o.filters) o.filters.alpha.opacity = Alpha *; else O.style . opacity = Alpha; }/* ===== encapsulate script = = * Diapo = {O: [], dc:0, img:0, txt:0, n:0, xm:0 ny:0, nw:0, nh:0, rs:0, rsb:0, zo:0, tx_pos:0, Tx_var : 0, tx_target:0,///////script parameters////////Attraction:2, Acceleration:. 9, dampening:. 1, Zoomover : 2, Zoomclick:6, transparency:. 8, font_size:18,/* = = = = = = = Diapo Resize =/resize:function () {with (this) { NX = Dc.offsetleft; NY = dc.offsettop; NW = Dc.offsetwidth; NH = dc.offsetheight; Txt.style.fontSize = Math.Round (nh/font_size) + "px"; if (Math.Abs (RS-RSB) <100) for (var i=0; i<n; i++) o[i].resize (); RSB = RS; This.x_pos = This.y_pos = 0; This.x_origin = This.y_origin = 0; This.x_var = This.y_var = 0; This.x_target = This.y_target = 0; This.w_pos = This.h_pos = 0; This.w_origin = This.h_origin = 0; This.w_var = This.h_var = 0; This.w_target = This.h_target = 0; This.over = false; This.click = false; * = = = = = = = = = = = = = Document.cr This.spaEateelement ("span"); This.spa.className = "SPADC"; Diapo. Dc.appendchild (THIS.SPA); * = = = = = = = = = = = = = = Document.createelement ("img") thumbnail image = = = This.img This.img.className = "IMGDC"; THIS.IMG.SRC = O.SRC; THIS.IMG.O = this; Diapo. Dc.appendchild (THIS.IMG); SetOpacity (this.img, diapo.transparency); * = = = = = = = = = = = = = Mouse Events =/This.img.onselectstart = new Function ("return false;"); This.img.ondrag = new Function ("return false;"); This.img.onmouseover = function () {diapo.tx_target=0; Diapo.txt.innerhtml=this. O.o.alt; This. O.over=true; SetOpacity (this,this. O.CLICK?DIAPO.TRANSPARENCY:1); } this.img.onmouseout = function () {DIAPO.TX_TARGET=-DIAPO.NW; This. O.over=false; SetOpacity (this,diapo.transparency); } This.img.onclick = function () {if (!this). O.click) {if (Diapo.zo && diapo.zo!= This) Diapo.zo.onclick (); This. O.click = true; This. O.x_origin = (DIAPO.NW-(this. O.w_origin * Diapo.zoomclick))/2; This. O.y_origin = (Diapo.nh-(this. O.h_origin * Diapo.zoomclick))/2; Diapo.zo = this; SetOpacity (this,diapo.transparency); } else {this. O.click = false; This. O.over = false; This. O.resize (); Diapo.zo = 0; }/* = = = = Rearrange thumbnails based on "imgsrc" images position = =/This.resize = function () {with (this) {x_origin = O.offsetleft; Y_origin = O.offsettop; W_origin = O.offsetwidth; H_origin = O.offsetheight; = =/W_target = W_origin; H_target = H_origin; if (over) {/* = = = = = = = = = = = W_origin * Diapo.zoomover W_target = mouse over = = H_target = H_origin * diapo.zoomover; X_target = DIAPO.XM-W_POS/2-(DIAPO.XM-(X_origin + W_POS/2))/(diapo.attraction* (click?10:1)); Y_target = DIAPO.YM-H_POS/2-(Diapo.ym-(Y_origin + H_POS/2))/(Diapo.attraction* (click?10:1)); else {/* = = = = = = Mouse out = =/X_target = X_origin; Y_target = Y_origin; if (click) {/* = = = = = = = = = = W_origin = * Diapo.zoomclick clicked = * W_target = H_target = H_origin * Diapo.zoomclick; /* = = = = = = = Magic Spring equations =/X_pos + = X_var = X_var * diapo.acceleration + (x_target-x_pos) * Diapo. dampening; Y_pos + = Y_var = Y_var * diapo.acceleration + (y_target-y_pos) * diapo.dampening; W_pos + = W_var = W_var * (diapo.acceleration *. 5) + (w_target-w_pos) * (diapo.dampening *. 5); H_pos + = H_var = H_var * (diapo.acceleration *. 5) + (h_target-h_pos) * (diapo.dampening *. 5); Diapo.rs + = (Math.Abs (x_var) + Math.Abs (Y_var)); * = = = = = = = = = = = = = = = = = HTML Animation top = Math.Round (Y_pos) + "px"; width = math.round (Math.max (0, W_pos)) + "px"; Height = math.round (Math.max (0, H_pos)) + "px"; ZIndex = Math.rounD (W_pos); With (Spa.style) {left = Math.Round (X_pos + w_pos *. 1) + "px"; top = Math.Round (Y_pos + h_pos *. 1) + "px"; width = math.round (Math.max (0, W_pos * 1.1)) + "px"; Height = math.round (Math.max (0, H_pos * 1.1)) + "px"; ZIndex = Math.Round (W_pos); }},/* = = = = = = = = = = = = = = = = = = Xm-diapo.nx () {diapo.xm = Run:function Diapo.ym = Ym-diapo.ny; /* = = = = = = = Anim = = = = Diapo.tx_var/Diapo.tx_pos + = Diapo.tx_var = caption + 9 + (diapo.tx_target-diapo.tx_pos) *. 02; Diapo.txt.style.left = Math.Round (diapo.tx_pos) + "px"; /* = = = = = = = = = = = = = = = Images Anim = = O) Diapo. O[i].position (); /* = = = = = = = = = =/settimeout ("Diapo.run ();", 16); },/* = = = = = Load Images =/images_load:function () {//===== loop until all images are loaded ===== var M = 0; for (var i=0; I<diapo. N i++) {if (diapo.img[i].complete) {diapo.img[i].style.position = "relative"; Diapo. O[i].img.style.visibility = "visible"; Diapo. o[i].spa.style.visibility = "visible"; m++; } resize (); } if (M<diapo. N) settimeout ("Diapo.images_load ();", 128); /* = = = = = = = = = = = = = = = = = = = = = = Diapo DC = document.getElementById ("Diapocontainer"); Diapo.img = Diapo. Dc.getelementsbytagname ("img"); Diapo.txt = document.getElementById ("caption"); Diapo. N = Diapo.img.length; for (i=0; I<diapo. N i++) Diapo. O.push (New Diapo. Cdiapo (Diapo.img[i])); Diapo.resize (); Diapo.tx_pos =-DIAPO.NW; Diapo.tx_target =-DIAPO.NW; Diapo.images_load (); Diapo.run (); } </script> </pead> <body> <!--Add the following code between <body> and </body>--> <div id= " Diapocontainer "> <div id=" bkgcaption "></div> <div id=" Caption "></div> </div> <script type=" Text/javascript "> * = = Start Script = =/function dom_onl Oad () {if (document.getElementById ("Diapocontainer")) Diapo.init (); Else settimeout ("dom_onload ();", 128);} dom_ OnLoad (); </script> </body> </ptml>
Tip: You can modify some of the code before running
