[推荐]令人震撼的图片展示效果
2008-06-14 22:40
706 查看
导读:
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
令人震撼的图片展示效果
1
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;
}
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';
}
/* ---- 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 () { 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.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;
});
/* ---- 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);
My identity lies in not knowing who I am
...are made by not following instructions
...can come between us
Here you come!
They don't know all the facts yet
Emotional intimacy
...remains to be done before we can announce our total failure to make any progress
Errare Programma Est
There's no such thing
I抦 now trapped, without hope of escape or rescue
The World is flat
1 l0v3 j00 - f0r3v3r
111 111 111 x 111 111 111 = 12345678987654321
...has not been written yet
Loading
Please wait...
![](http://preview.zcool.com.cn/code/js/04/1/sb.gif)
![](http://preview.zcool.com.cn/code/js/04/1/sl.gif)
![](http://preview.zcool.com.cn/code/js/04/1/sr.gif)
![](http://preview.zcool.com.cn/code/js/04/1/sc.gif)
提示:您可以先修改部分代码再运行
下载地址已修正:http://downsc.zcool.com.cn/code/js/04_images_box_zcool.com.cn.rar
2
html {
overflow: hidden;
}
body {
background: #222;
width: 100%;
height: 100%;
cursor: crosshair;
}
.spanSlide {
position: absolute;
background: #000;
font-size: 1px;
overflow: hidden;
}
.imgSlide {
position: absolute;
left: 5%;
top: 5%;
width: 90%;
height: 90%;
overflow: hidden;
}
.txtSlide {
position: absolute;
top: 5%;
left: 50px;
width:100%;
color:#FFF;
font-family: arial, helvetica, verdana, sans-serif;
font-weight: bold;
font-size:96px;
letter-spacing:12px;
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
var ym=0;
var ny=0;
createElement = function(container, type, param){
o=document.createElement(type);
for(var i in param)o[i]=param[i];
container.appendChild(o);
return o;
}
mooz = {
O:[],
/////////
mult:6,
nbI:5,
/////////
rwh:0,
imgsrc:0,
W:0,
H:0,
Xoom:function(N){
this.o = createElement(document.getElementById("screen"), "span", {
'className':'spanSlide'
});
img = createElement(this.o, "img", {
'className':"imgSlide",
'src':mooz.imgsrc[N%mooz.imgsrc.length].src
});
spa = createElement(this.o, "span", {
'className':"imgSlide"
});
txt = createElement(spa, "span", {
'className':"txtSlide",
'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
});
this.N = 10000+N;
},
mainloop:function(){
with(this){
for(i=0; iny)ny=ym/2;
}
window.onload = function(){
ym = ny+50;
mooz.oigres();
}
Loading...
![](http://preview.zcool.com.cn/code/js/04/2/pil.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/cit.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/earth.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/draps.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/flo.jpg)
提示:您可以先修改部分代码再运行
3
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;
}
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);
}
/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 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
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg)
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
提示:您可以先修改部分代码再运行
3
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;
}
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);
}
/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 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
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg)
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
提示:您可以先修改部分代码再运行
4
body {
background: #222;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#screen img {
position: absolute;
visibility: hidden;
}
#screen span {
position: absolute;
background: #fff;
cursor: pointer;
visibility: hidden;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
![](http://preview.zcool.com.cn/code/js/04/4/wi37.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi2.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi7.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi20.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi3.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi10.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi30.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi11.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi21.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi29.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi19.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi27.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi33.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi35.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi42.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi15.jpg)
提示:您可以先修改部分代码再运行
本文转自
http://bbs.51js.com/thread-77249-1-1.html
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
![](http://bbs.51js.com/images/default/agree.gif)
令人震撼的图片展示效果
1
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;
}
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';
}
/* ---- 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 () { 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.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;
});
/* ---- 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);
My identity lies in not knowing who I am
...are made by not following instructions
...can come between us
Here you come!
They don't know all the facts yet
Emotional intimacy
...remains to be done before we can announce our total failure to make any progress
Errare Programma Est
There's no such thing
I抦 now trapped, without hope of escape or rescue
The World is flat
1 l0v3 j00 - f0r3v3r
111 111 111 x 111 111 111 = 12345678987654321
...has not been written yet
Loading
Please wait...
![](http://preview.zcool.com.cn/code/js/04/1/sb.gif)
![](http://preview.zcool.com.cn/code/js/04/1/sl.gif)
![](http://preview.zcool.com.cn/code/js/04/1/sr.gif)
![](http://preview.zcool.com.cn/code/js/04/1/sc.gif)
提示:您可以先修改部分代码再运行
下载地址已修正:http://downsc.zcool.com.cn/code/js/04_images_box_zcool.com.cn.rar
2
html {
overflow: hidden;
}
body {
background: #222;
width: 100%;
height: 100%;
cursor: crosshair;
}
.spanSlide {
position: absolute;
background: #000;
font-size: 1px;
overflow: hidden;
}
.imgSlide {
position: absolute;
left: 5%;
top: 5%;
width: 90%;
height: 90%;
overflow: hidden;
}
.txtSlide {
position: absolute;
top: 5%;
left: 50px;
width:100%;
color:#FFF;
font-family: arial, helvetica, verdana, sans-serif;
font-weight: bold;
font-size:96px;
letter-spacing:12px;
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
var ym=0;
var ny=0;
createElement = function(container, type, param){
o=document.createElement(type);
for(var i in param)o[i]=param[i];
container.appendChild(o);
return o;
}
mooz = {
O:[],
/////////
mult:6,
nbI:5,
/////////
rwh:0,
imgsrc:0,
W:0,
H:0,
Xoom:function(N){
this.o = createElement(document.getElementById("screen"), "span", {
'className':'spanSlide'
});
img = createElement(this.o, "img", {
'className':"imgSlide",
'src':mooz.imgsrc[N%mooz.imgsrc.length].src
});
spa = createElement(this.o, "span", {
'className':"imgSlide"
});
txt = createElement(spa, "span", {
'className':"txtSlide",
'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
});
this.N = 10000+N;
},
mainloop:function(){
with(this){
for(i=0; iny)ny=ym/2;
}
window.onload = function(){
ym = ny+50;
mooz.oigres();
}
Loading...
![](http://preview.zcool.com.cn/code/js/04/2/pil.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/cit.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/earth.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/draps.jpg)
![](http://preview.zcool.com.cn/code/js/04/2/flo.jpg)
提示:您可以先修改部分代码再运行
3
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;
}
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);
}
/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 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
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg)
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
提示:您可以先修改部分代码再运行
3
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;
}
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);
}
/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 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
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg)
![](http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg)
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
提示:您可以先修改部分代码再运行
4
body {
background: #222;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#screen img {
position: absolute;
visibility: hidden;
}
#screen span {
position: absolute;
background: #fff;
cursor: pointer;
visibility: hidden;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
![](http://preview.zcool.com.cn/code/js/04/4/wi37.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi2.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi7.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi20.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi3.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi10.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi30.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi11.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi21.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi29.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi19.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi27.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi33.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi35.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi42.jpg)
![](http://preview.zcool.com.cn/code/js/04/4/wi15.jpg)
提示:您可以先修改部分代码再运行
本文转自
http://bbs.51js.com/thread-77249-1-1.html
相关文章推荐
- JS特效:令人震撼的图片展示效果
- 令人震撼的图片展示效果
- 令人震撼的图片展示效果1
- 令人震撼的图片展示效果2
- 令人震撼的图片展示效果
- Javascript应用--震撼的图片展示效果(图片换成你的图片名就可以运行了)
- 论坛源码推荐(1月26日):360°展示图片 应用Taasky的带有3D效果的折叠菜单
- SlideView 图片滑动(扩展/收缩)展示效果 推荐
- OC基础之推荐一个旋转木马(跑马灯)效果的图片展示Demo
- 论坛源码推荐(1月26日):360°展示图片 应用Taasky的带有3D效果的折叠菜单
- CocoaChina代码库推荐(1月10日):Flickr类型的瀑布流 Foursqaure app图片展示效果
- 10款让你震撼的图片展示效果
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- CocoaChina代码库推荐(1月10日):Flickr类型的瀑布流 Foursqaure app图片展示效果
- 10款让你震撼的图片展示效果
- OC基础之推荐一个旋转木马(跑马灯)效果的图片展示Demo
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- 推荐(1月26日):360°展示图片 应用Taasky的带有3D效果的折叠菜单
- 10款让你震撼的图片展示效果
- FLEX翻牌图片展示效果.