原效果: http://elivenet.cn/js/2.htm
要求加入 http://elivenet.cn/js/1.htm 中类似的文字效果(跟着图片出来),文字白色略透明,字号要大(我会将图片修改到全屏,用来作幻灯片展示,想在每副图出来时跟着显示该图片的title,title加入的地方我已经像征性的加了几个(红色显示) 请在这些JS中加入按要求显示图片处加入的title的部分。
原效果的代码如下:(如果有需要参照elivenet.cn/js/1.htm的源代码,为防止网页无法访问,在这个代码后也给出了该源码(放这里超过字数了!)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超绚图片展示</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
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;
}
</style>
<script type="text/javascript"><!--
var Oz, Ov;
var obj = [];
var K = 0;
var img, scr, W, H;
var SP = 40; /* speed */
var dz = false;
/* html positioning */
position = function(obj, x, y, w, h)
{
with(obj.style){
left = Math.round(x) + "px";
top = Math.round(y) + "px";
width = Math.round(w) + "px";
height = Math.round(h) + "px";
}
}
/* create object instances */
function Cobj(parent, N, x, y, w, h)
{
this.zoomed = (parent ? 0 : 1);
obj[K] = this;
this.K = K ++;
this.parent = parent;
this.children = [];
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.vx = 0;
this.vy = 0;
this.vw = 0;
this.vh = 0;
this.xi = 0;
this.yi = 0;
this.wi = 0;
this.hi = 0;
this.x1 = 0;
this.y1 = 0;
this.w1 = 0;
this.h1 = 0;
this.x0 = 0;
this.y0 = 0;
this.w0 = 0;
this.h0 = 0;
this.imgsrc = img[N];
/* create HTML elements */
this.img = document.createElement("img");
this.img.src = this.imgsrc.src;
this.img.obj = this;
scr.appendChild(this.img);
this.spa = document.createElement("span");
this.spa.style.cursor = "pointer";
this.spa.obj = this;
scr.appendChild(this.spa);
if (parent) parent.children.push(this);
/* Flickr */
this.blink = function()
{
with(this)
{
position(spa, x0, y0, w0, h0);
spa.style.visibility = "visible";
img.style.cursor = "pointer";
setTimeout("obj[" + K + "].spa.style.visibility='hidden'", 128);
}
}
/* display image & children */
this.display = function(zoomed)
{
with(this)
{
position(img, x0, y0, w0, h0);
img.style.visibility = "visible";
if (parent && ! zoomed)
{
blink();
Ov = img;
}
}
}
/* init zoom */
this.init_zoom = function(d)
{
with(this)
{
w1 = imgsrc.width;
h1 = imgsrc.height;
x1 = (W - w1) / 2;
y1 = (H - h1) / 2;
x0 = (parent ? x + parent.x1 : (W - w1) / 2);
y0 = (parent ? y + parent.y1 : (H - h1) / 2);
w0 = (parent ? w : w1);
h0 = (parent ? h : h1);
xi = d > 0 ? x0 : x1;
yi = d > 0 ? y0 : y1;
wi = d > 0 ? w0 : w1;
hi = d > 0 ? h0 : h1;
vx = d * (x1 - x0) / SP;
vy = d * (y1 - y0) / SP;
vw = d * (w1 - w0) / SP;
vh = d * (h1 - h0) / SP;
parent.vx = d * ((x1 - (x * w1 / w0)) - parent.x1) / SP;
parent.vy = d * ((y1 - (y * h1 / h0)) - parent.y1) / SP;
parent.vw = vw * (parent ? (parent.w1 / w) : 0);
parent.vh = vh * (parent ? (parent.h1 / h) : 0);
}
}
/* animate zoom in - out */
this.zoom = function()
{
with(this)
{
xi += vx;
yi += vy;
wi += vw;
hi += vh;
parent.xi += parent.vx;
parent.yi += parent.vy;
parent.wi += parent.vw;
parent.hi += parent.vh;
position(img, xi, yi, wi, hi);
position(parent.img, parent.xi, parent.yi, parent.wi, parent.hi);
if ((zoomed == 0 && wi > w0 - vw) || (zoomed == 1 && wi < w1 - vw))
{
setTimeout("obj[" + K + "].zoom()", 16);
}
else
{
dz = false;
for (var i in Oz.children)
{
Oz.children[i].init_zoom();
Oz.children[i].display(false, false);
}
}
}
}
/* mouse events */
this.img.onmouseover = function()
{
if (this != Ov) with(this.obj) if (parent && ! zoomed && ! dz) blink();
Ov = this;
return false;
}
this.img.onclick = function()
{
with(this.obj)
{
if (parent && !dz && imgsrc.complete)
{
if (zoomed == 1)
{
/* zoom out */
Oz = this.obj.parent;
zoomed = 0;
init_zoom( -1);
for (var i in children) children[i].img.style.visibility = "hidden";
parent.zoomed = 1;
dz = true;
zoom();
}
else if (zoomed == 0)
{
/* zoom in */
Oz = this.obj;
img.style.cursor = "crosshair";
zoomed = 1;
init_zoom(1);
for (var i in parent.children)
{
if (this.obj != parent.children[i])
parent.children[i].img.style.visibility = "hidden";
}
parent.zoomed = -1;
dz = true;
zoom();
}
}
}
return false;
}
this.spa.onmousedown = function()
{
this.style.visibility="hidden";
this.obj.img.onclick();
return false;
}
}
/* initialization */
/* must start after the first image is loaded */
function starter()
{
scr = document.getElementById("screen");
img = document.getElementById("images").getElementsByTagName("img");
W = parseInt(scr.style.width);
H = parseInt(scr.style.height);
/* ==== tree-zoom ==== */
// new Cobj(parent, image, x, y, w, h)
O = new Cobj(0, 0, 0, 0, 0, 0);
O0 = new Cobj(O, 1, 127, 98, 181, 134);
O1 = new Cobj(O0, 2, 158, 150, 85, 155);
O11 = new Cobj(O1, 4, 136, 98, 80, 196);
O111 = new Cobj(O11, 5, 20, 154, 70, 57);
O1111 = new Cobj(O111, 6, 161, 137, 154, 76);
O112 = new Cobj(O11, 11, 155, 154, 70, 57);
O1121 = new Cobj(O112, 12, 273, 116, 49, 72);
O2 = new Cobj(O0, 3, 281, 150, 90, 154);
O21 = new Cobj(O2, 7, 35, 295, 133, 82);
O211 = new Cobj(O21, 15, 316, 183, 20, 36);
O22 = new Cobj(O2, 8, 179, 295, 127, 79);
O221 = new Cobj(O22, 13, 132, 84, 54, 102);
O2211 = new Cobj(O221, 14, 6, 234, 69, 50);
O22111 = new Cobj(O2211, 14, 267, 90, 135, 98);
O23 = new Cobj(O2, 9, 92, 148, 138, 76);
O231 = new Cobj(O23, 10, 249, 106, 83, 65);
O2311 = new Cobj(O231, 0, 120, 87, 57, 59);
/* display */
O.init_zoom(1);
O.display(true);
for (var i in O.children)
{
O.children[i].init_zoom(1);
O.children[i].display(true);
}
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
<div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000">
</div>
<div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden">
</div>
</div>
<div id="images" style="position:absolute;left:-10000px;top:-10000px;">
<img onload="setTimeout('starter();',500)" src="images/08081204wi37.jpg">
<img title="与该图片同时显示的文字" src="images/08081204wi2.jpg"> <img title="与该图片同时显示的文字" src="images/08081204wi7.jpg"> <img src="images/08081204wi20.jpg">
<img title="与该图片同时显示的文字" src="images/08081204wi3.jpg"> <img title="与该图片同时显示的文字" src="images/08081204wi10.jpg"> <img src="images/08081204wi30.jpg">
<img src="images/08081204wi11.jpg"> <img src="images/08081204wi21.jpg"> <img src="images/08081204wi29.jpg">
<img src="images/08081204wi19.jpg"> <img src="images/08081204wi27.jpg"> <img src="images/08081204wi33.jpg">
<img src="images/08081204wi35.jpg"> <img src="images/08081204wi42.jpg"> <img src="images/08081204wi15.jpg"> </div>
</body>
</html>
21 个解决方案
#1
有文字效果的那个网页的源码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超绚图片展示(二)</title>
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
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; i<mooz.nbI; i++) {
O[i].N += (ym-ny)/8000;
N = O[i].N%nbI;
ti = Math.pow(mult,N);
with(O[i].o.style){
left = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
top = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
zIndex = Math.round(10000-ti*.1);
width = Math.round(ti*rwh)+"px";
height = Math.round(ti)+"px";
}
}
}
setTimeout("mooz.mainloop();", 16);
},
oigres:function(){
with(this){
W = parseInt(document.getElementById("screen").style.width);
H = parseInt(document.getElementById("screen").style.height);
imgsrc = document.getElementById("images").getElementsByTagName("img");
rwh = imgsrc[0].width/imgsrc[0].height;
for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
mainloop();
}
}
}
document.onmousemove = function(e){
if(window.event) e=window.event;
ym = (e.y || e.clientY);
if(ym/2>ny)ny=ym/2;
}
window.onload = function(){
ym = ny+50;
mooz.oigres();
}
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
<div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>
<div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>
<div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
</div>
<div id="images" style="visibility:hidden">
<img title="infinite" src="images/08081201001.jpg">
<img title="yellow" src="images/08081201004.jpg">
<img title="earth" src="images/08081201005.jpg">
<img title="dream" src="images/08081201010.jpg">
<img title="flowers" src="images/08081201012.jpg">
</div>
</body>
</html>
#2
帮LZ顶
#3
另一个境界呀,JS高手,顶了
#4
我也刚刚开始使用JS。支持LZ,随便学习下
#5
跟楼上的一样,帮项,顺便学一下楼主的JS
#6
參照
[Xoom:function(N)]
的寫法,把txt用的span節點追加到你的 [/* create HTML elements */ ]裏面。
例子裏面每次新建節點的時候都是2個的,1個是圖片,一個是title。你的裏面只建一個圖片。
的寫法,把txt用的span節點追加到你的 [/* create HTML elements */ ]裏面。
例子裏面每次新建節點的時候都是2個的,1個是圖片,一個是title。你的裏面只建一個圖片。
#7
能具体改一改吗?看能不能实现效果(字的特效可以不写,只要有字都可以了),我知道要改的大概地方,要改的不多,但我对种做法不太清楚,帮帮忙啦!对于熟悉的只是举手之劳。
#8
楼主你这样提问我看很少有人有时间回答啊,,
给你一个建议
你应该把问题无限细分,,这样就可以让更多人帮你解决他们擅长的问题而不会花费大家太多的时间。
就算有人知道你的问题怎么解决,,要看你这么长的代码,,恐怕没有几个人有那么多时间呀
给你一个建议
你应该把问题无限细分,,这样就可以让更多人帮你解决他们擅长的问题而不会花费大家太多的时间。
就算有人知道你的问题怎么解决,,要看你这么长的代码,,恐怕没有几个人有那么多时间呀
#9
不多啊,哪个网页不是一长串代码,这只是实现一个功能的代码而已,而且这里只要看第一个就可以了,第二个是用来参考的,本来它们就是联系在一起的整体,细分后,别人可能还会因为不知前后文而看不明白吧!
#10
没人愿意看吗?就当自己学习一下这个代码吧!
#11
看来要么自己碰运气的改,要么改方案呢!
#12
楼主,直接读title加进去一个层就行了啊
#13
请帮忙在具体位置写一下行吗?我这方面比较菜,只知道那么回事,这几天头痛,不想使劲看!先谢啦!
#14
/* create HTML elements */
this.img = document.createElement("img");
this.img.src = this.imgsrc.src;
this.img.obj = this;
scr.appendChild(this.img);
this.spa = document.createElement("span");
this.spa.style.cursor = "pointer";
this.spa.obj = this;
scr.appendChild(this.spa);
if (parent) parent.children.push(this);
创建img对象的时候,顺手创建你要显示得div,今天太晚了,明天你把图片发给我,我帮你改吧,要睡觉了,88
this.img = document.createElement("img");
this.img.src = this.imgsrc.src;
this.img.obj = this;
scr.appendChild(this.img);
this.spa = document.createElement("span");
this.spa.style.cursor = "pointer";
this.spa.obj = this;
scr.appendChild(this.spa);
if (parent) parent.children.push(this);
创建img对象的时候,顺手创建你要显示得div,今天太晚了,明天你把图片发给我,我帮你改吧,要睡觉了,88
#15
谢谢,我先试下,看能不能改好。
怕我们上网的时间相差太大,免得等,我已经把文件和图片及说明打包上传了,你到这来下载后帮我改吧!(用IE等自带工具下)
http://uushare.com/user/elivenet/file/836442
#16
高手也~
国庆节快乐!~~
国庆节快乐!~~
#17
效果不错啊
#18
不熟,修改了好久还是不行!
#19
好长啊,眼都是疼的,所以也不看了,帮你顶吧
#20
谢谢!再等......
#21
看来无望了!……
#1
有文字效果的那个网页的源码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超绚图片展示(二)</title>
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
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; i<mooz.nbI; i++) {
O[i].N += (ym-ny)/8000;
N = O[i].N%nbI;
ti = Math.pow(mult,N);
with(O[i].o.style){
left = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
top = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
zIndex = Math.round(10000-ti*.1);
width = Math.round(ti*rwh)+"px";
height = Math.round(ti)+"px";
}
}
}
setTimeout("mooz.mainloop();", 16);
},
oigres:function(){
with(this){
W = parseInt(document.getElementById("screen").style.width);
H = parseInt(document.getElementById("screen").style.height);
imgsrc = document.getElementById("images").getElementsByTagName("img");
rwh = imgsrc[0].width/imgsrc[0].height;
for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
mainloop();
}
}
}
document.onmousemove = function(e){
if(window.event) e=window.event;
ym = (e.y || e.clientY);
if(ym/2>ny)ny=ym/2;
}
window.onload = function(){
ym = ny+50;
mooz.oigres();
}
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
<div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>
<div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>
<div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
</div>
<div id="images" style="visibility:hidden">
<img title="infinite" src="images/08081201001.jpg">
<img title="yellow" src="images/08081201004.jpg">
<img title="earth" src="images/08081201005.jpg">
<img title="dream" src="images/08081201010.jpg">
<img title="flowers" src="images/08081201012.jpg">
</div>
</body>
</html>
#2
帮LZ顶
#3
另一个境界呀,JS高手,顶了
#4
我也刚刚开始使用JS。支持LZ,随便学习下
#5
跟楼上的一样,帮项,顺便学一下楼主的JS
#6
參照
[Xoom:function(N)]
的寫法,把txt用的span節點追加到你的 [/* create HTML elements */ ]裏面。
例子裏面每次新建節點的時候都是2個的,1個是圖片,一個是title。你的裏面只建一個圖片。
的寫法,把txt用的span節點追加到你的 [/* create HTML elements */ ]裏面。
例子裏面每次新建節點的時候都是2個的,1個是圖片,一個是title。你的裏面只建一個圖片。
#7
能具体改一改吗?看能不能实现效果(字的特效可以不写,只要有字都可以了),我知道要改的大概地方,要改的不多,但我对种做法不太清楚,帮帮忙啦!对于熟悉的只是举手之劳。
#8
楼主你这样提问我看很少有人有时间回答啊,,
给你一个建议
你应该把问题无限细分,,这样就可以让更多人帮你解决他们擅长的问题而不会花费大家太多的时间。
就算有人知道你的问题怎么解决,,要看你这么长的代码,,恐怕没有几个人有那么多时间呀
给你一个建议
你应该把问题无限细分,,这样就可以让更多人帮你解决他们擅长的问题而不会花费大家太多的时间。
就算有人知道你的问题怎么解决,,要看你这么长的代码,,恐怕没有几个人有那么多时间呀
#9
不多啊,哪个网页不是一长串代码,这只是实现一个功能的代码而已,而且这里只要看第一个就可以了,第二个是用来参考的,本来它们就是联系在一起的整体,细分后,别人可能还会因为不知前后文而看不明白吧!
#10
没人愿意看吗?就当自己学习一下这个代码吧!
#11
看来要么自己碰运气的改,要么改方案呢!
#12
楼主,直接读title加进去一个层就行了啊
#13
请帮忙在具体位置写一下行吗?我这方面比较菜,只知道那么回事,这几天头痛,不想使劲看!先谢啦!
#14
/* create HTML elements */
this.img = document.createElement("img");
this.img.src = this.imgsrc.src;
this.img.obj = this;
scr.appendChild(this.img);
this.spa = document.createElement("span");
this.spa.style.cursor = "pointer";
this.spa.obj = this;
scr.appendChild(this.spa);
if (parent) parent.children.push(this);
创建img对象的时候,顺手创建你要显示得div,今天太晚了,明天你把图片发给我,我帮你改吧,要睡觉了,88
this.img = document.createElement("img");
this.img.src = this.imgsrc.src;
this.img.obj = this;
scr.appendChild(this.img);
this.spa = document.createElement("span");
this.spa.style.cursor = "pointer";
this.spa.obj = this;
scr.appendChild(this.spa);
if (parent) parent.children.push(this);
创建img对象的时候,顺手创建你要显示得div,今天太晚了,明天你把图片发给我,我帮你改吧,要睡觉了,88
#15
谢谢,我先试下,看能不能改好。
怕我们上网的时间相差太大,免得等,我已经把文件和图片及说明打包上传了,你到这来下载后帮我改吧!(用IE等自带工具下)
http://uushare.com/user/elivenet/file/836442
#16
高手也~
国庆节快乐!~~
国庆节快乐!~~
#17
效果不错啊
#18
不熟,修改了好久还是不行!
#19
好长啊,眼都是疼的,所以也不看了,帮你顶吧
#20
谢谢!再等......
#21
看来无望了!……