关于一个JavaScript实现相册的特效问题，效果已经出来了，但有些问题，请大大们指教！可以追加分！！

zhenai0512 2008-10-31 11:32:50
主要的实现技术就是JavaScript,DIV,CSS。描述如下：我有两个JavaScript函数，分别实现翻书的相册效果和淡入淡出的效果，底部DIV层导航实现翻书效果，右边DIV层导航实现淡入淡出的效果，这两种效果都在中间的DIV层位置显示。现在的问题是：当底部导航到一张美女的全身图片时，单击右部导航实现美女的鼻子，耳朵，嘴唇显示，问题是怎么都在中间的位置显示呢？（这样的时候就会覆盖美女全身的图片，而只显示身体局部，比如鼻子）
第一个翻书的JavaScript函数代码如下：
-----------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
<!--

document.onselectstart = function () { return false; }

var nI = 0;
var kI = 0;
var run = false;

function setOpacity(obj,o) {
if (o<0) o=0; else if (o>100) o = 100;
if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
P1.style.left = 50-(2.5*p)+"%";
P1.style.width = (2.5*p)+"%";
setOpacity(P1i, .5*p*p);
if (p == 20) run = false;
}
function TPR_(p) {
P2.style.width = 50-(2.5*p)+"%";
setOpacity(P2i, 100-.5*(p*p));
if (p == 20) {
P2i.src = IMGSRC[kI].src;
setOpacity(P2i, 100);
P2.style.width = "50%";
for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
}
}
function TPR() {
if (!run) {
run = true;
P01i.src = IMGSRC[kI].src;
P1.style.width = 0;
kI++;
if (kI>=nI) kI = 0;
titLe(kI);
P02i.src = IMGSRC[kI].src;
P1i.src = IMGSRC[kI].src;
for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
} else setTimeout("TPR()", 100);
}

function TPL__(p) {
P2.style.width = (2.5*p)+"%";
setOpacity(P2i, .5*p*p);
if (p == 20) run = false;
}
function TPL_(p) {
P1.style.left = (2.5*p)+"%";
P1.style.width = 40+(10-2.5*p)+"%";
setOpacity(P1i, 100-.5*(p*p));
if (p == 20) {
P1i.src = IMGSRC[kI].src;
setOpacity(P1i, 100);
P1.style.left = 0;
P1.style.width = "50%";
for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
}
}
function TPL() {
if (!run) {
run = true;
P02i.src = IMGSRC[kI].src;
P2.style.width = 0;
kI--;
if (kI < 0) kI = nI-1;
titLe(kI);
P01i.src = IMGSRC[kI].src;
P2i.src = IMGSRC[kI].src;
for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
} else setTimeout("TPL()", 100);
}
function titLe(p) {
document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}
onload = function() {
IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
DB = document.getElementById("DHTMLBOOK");
P01 = DB.getElementsByTagName("span")[0];
P01i = P01.getElementsByTagName("img")[0];
P02 = DB.getElementsByTagName("span")[1];
P02i = P02.getElementsByTagName("img")[0];
P1 = DB.getElementsByTagName("span")[2];
P1i = P1.getElementsByTagName("img")[0];
P2 = DB.getElementsByTagName("span")[3];
P2i = P2.getElementsByTagName("img")[0];
nI = IMGSRC.length;
P1i.src = IMGSRC[kI].src;
P2i.src = IMGSRC[kI].src;
titLe(kI);
DB.style.visibility = "visible";
}
//-->
</script>
----------------------------------------------------------------------------------------
第二个淡入淡出的JavaScript函数代码如下：
---------------------------------------------------------------------------------------------
<script language="JavaScript">
<!--
function change(img)
{
img=eval("document.all."+img);
if(img.filters.alpha.opacity>=100)
clearInterval(timer);
else
++img.filters.alpha.opacity;
}
timer=setInterval("change('photo')",10)
function next(img){
if(timer) clearInterval(timer);
document.all.photo.src = img;
document.all.photo.filters.alpha.opacity = 0;
timer=setInterval("change('photo')",10);
}
-->
</script>
-----------------------------------------------------------------------------------------------------------
底部DIV层如下：
-----------------------------------------------------------------------------------------------------------
<div id="bottom">
<a href="javascript:void(0)" onclick="TPL();"><img src="images/1.jpg"/></a>
<a href="javascript:void(0)" onclick="TPR();"><img src="images/2.jpg"/></a
</div>
右部DIV层如下：
----------------------------------------------------------------------------------------------------------
<div id="right">
<a href="javascript:void(0)" onclick="next('images/01.jpg')"><img src="images/1.jpg"/></a>
<a href="javascript:void(0)" onclick="next('images/04.jpg')"><img src="images/4.jpg"/></a>
<div>
---------------------------------------------------------------------------------------------------------
中间的DIV层如下：
------------------------------------------------------------------------------------------------------
<div id="main">
此处显示效果
</div>
...全文
708 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
不悲不喜 2008-11-03
  • 打赏
  • 举报
 回复 
<script type="text/javascript">

<!--

document.onselectstart = function () { return false; }



var nI  = 0;

var kI  = 0;

var run = false;





function TPR__(p) {

	P1.style.left  = 50-(2.5*p)+"%";

	P1.style.width = (2.5*p)+"%";

	setOpacity(P1i, .5*p*p);

	if (p == 20) run = false;

}



function TPR_(p) {

	P2.style.width = 50-(2.5*p)+"%";

	setOpacity(P2i, 100-.5*(p*p));

	if (p == 20) {

		P2i.src = IMGSRC[kI].src;

		setOpacity(P2i, 100);

		P2.style.width = "50%";

		for(var i=1; i <=20; i++){ 

			setTimeout("TPR__("+i+")", i*32);

		}

	}

}



function TPR() {

	if (!run) {

		run = true;

		P01i.src = IMGSRC[kI].src;

		P1.style.width = 0;

		kI++;

	

		if (kI>=nI) 

			kI = 0;

			

		titLe(kI);

		P02i.src = IMGSRC[kI].src;

		P1i.src  = IMGSRC[kI].src;



		P1.style.width = "0%";

		P2.style.width = "50%";

	

		for (var i=1; i <=20; i++) 

			setTimeout("TPR_("+i+")", i*32);

	

	} else 

		setTimeout("TPR()", 100);



}



function TPL__(p) {

	P2.style.width = (2.5*p)+"%";

	setOpacity(P2i, .5*p*p);

	if (p == 20) run = false;

}



function TPL_(p) {

	window.status = p;

	P1.style.left  = (2.5*p)+"%";

	P1.style.width = 40+(10-2.5*p)+"%";

	setOpacity(P1i, 100-.5*(p*p));

	if (p == 20) {

		P1i.src = IMGSRC[kI].src;

		setOpacity(P1i, 100);

		P1.style.left  = 0;

		P1.style.width = "50%";

		for(var i=1; i <=20; i++) 

			setTimeout("TPL__("+i+")", i*32);

	}

}



function TPL() {

	if (!run) {

		run = true;

		P02i.src = IMGSRC[kI].src;

		P2.style.width = 0;

		kI--;

		if (kI < 0) kI = nI-1;

		titLe(kI);

		P01i.src = IMGSRC[kI].src;

		P2i.src  = IMGSRC[kI].src;

		for(var i=1; i <=20; i++) 

			setTimeout("TPL_("+i+")", i*32);

	} else 

		setTimeout("TPL()", 100);

}



function titLe(p) {

	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;

}



onload = function() {

	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");

	DB      = document.getElementById("DHTMLBOOK");

	P01    = DB.getElementsByTagName("span")[0];

	P01i    = P01.getElementsByTagName("img")[0];

	P02    = DB.getElementsByTagName("span")[1];

	P02i    = P02.getElementsByTagName("img")[0];

	P1      = DB.getElementsByTagName("span")[2];

	P1i    = P1.getElementsByTagName("img")[0];

	P2      = DB.getElementsByTagName("span")[3];

	P2i    = P2.getElementsByTagName("img")[0];

	nI      = IMGSRC.length;

	P1i.src = IMGSRC[kI].src;

	P2i.src = IMGSRC[kI].src;

	titLe(kI);

	DB.style.visibility = "visible";

}

//-->

</script>

</head>



<body>



<div id="center">

	<div id="DHTMLBOOK">

		<span class="page" onMouseDown="return false;" onDblClick="TPL();" onClick="TPL();"> 

			<img id="iP01" class="img" style="opacity:100;filter:alpha()"> 

		</span>

		<span class="page right" onMouseDown="return false;" onDblClick="TPR();" onClick="TPR();"> 

			<img id="iP02" class="img" style="opacity:100;filter:alpha();left:-100%"> 

		</span>

		<span class="page turn" onMouseDown="return false;" onDblClick="TPL();" onClick="TPL();"> 

			<img id="iP1" class="img" style="opacity:1;filter:alpha()"> 

		</span>

		<span class="page turn right" onMouseDown="return false;" onDblClick="TPR();" onClick="TPR();"> 

			<img id="iP2" class="img" style="opacity:1;filter:alpha();left:-100%"> 

		</span>

		<div id="TXTBOX"> </div>

	</div>

</div>



<div id="imgsrc" style="visibility:hidden;">

	<img alt="In the early morning he departed."  src="images/img.jpg">

	<img alt="Believing she had dreamed of the roar of his bike," src="images/04.jpg">

	<img alt="she woke up to the sunshine in her eyelids." src="images/05.jpg">

</div>



<div id="main">

	<div id="left" > 

		<img id="photo" src="" style="margin:4px;filter:alpha(opacity=0)" /> 

	</div>



	<div id="left_top">??????? </div>



	<div id="right">

		<a href="javascript:void(0)" onclick="next('images/01.jpg')"> 

			<img  src="images/1.jpg"/> 

		</a>  

		<a href="javascript:void(0)" onclick="next('images/02.jpg')"> 

			<img  src="images/2.jpg"/> 

		</a>  

		<a href="javascript:void(0)" onclick="next('images/03.jpg')"> 

			<img  src="images/3.jpg"/> 

		</a> <br> <br>

		<a href="javascript:void(0)" onclick="next('images/04.jpg')"> 

			<img  src="images/4.jpg"/> 

		</a>  

		<a href="javascript:void(0)" onclick="next('images/05.jpg')"> 

			<img  src="images/5.jpg"/> 

		</a>  

		

		<a href="javascript:void(0)" onclick="next('images/06.jpg')"> 

			<img  src="images/6.jpg"/> 

		</a> <br> <br> 

		<a href="javascript:void(0)" onclick="next('images/07.jpg')"> 

			<img  src="images/7.jpg"/> 

		</a>  

		<a href="javascript:void(0)" onclick="next('images/08.jpg')"> 

			<img  src="images/8.jpg"/> 

		</a>  

		<a href="javascript:void(0)" onclick="next('images/09.jpg')"> 

			<img  src="images/9.jpg"/> 

		</a>

	</div>



	<div id="right2">?? </div>

	<div id="bottom">

	  <a href="javascript:void(0)" onclick="TPL();"> 

	  	<img  src="images/1.jpg"/> 

	  	</a>  

	  	<a href="javascript:void(0)" onclick="TPR();"> 

	  		<img  src="images/2.jpg"/> 

	  		</a>  

	  	<a href="javascript:void(0)" onclick="TPL();"> 

	  		<img  src="images/3.jpg"/> 

	  		</a>  

	  	<a href="javascript:void(0)" onclick="next('images/04.jpg')"> 

	  		<img  src="images/4.jpg"/> 

	  	</a>  

	  	<a href="javascript:void(0)" onclick="next('images/05.jpg')"> 

	  		<img  src="images/5.jpg"/> 

	  	</a>  

	  	<a href="javascript:void(0)" onclick="next('images/06.jpg')"> 

	  		<img  src="images/6.jpg"/> 

  		</a>  

  		<a href="javascript:void(0)" onclick="next('images/07.jpg')"> 

  			<img  src="images/7.jpg"/> 

  			</a>  

		<a href="javascript:void(0)" onclick="next('images/08.jpg')"> 

			<img  src="images/8.jpg"/> 

			</a>  

		<a href="javascript:void(0)" onclick="next('images/09.jpg')"> 

			<img  src="images/9.jpg"/>

		</a>

	</div>

</div>

</body>

</html>



<script language="javascript">

function setOpacity(obj,o) {

	if (o <0) o=0; else if (o>100) o = 100;

	if (obj.filters){

		obj.filters.alpha.opacity=o;

	} else {

		obj.style.opacity = o/100;

	}

}



var fadeOpacity = 100;

	

function FADEIN__(p) {

	setOpacity(P1i,.5*p*p);

	setOpacity(P2i,.5*p*p);



	if (p == 20){

		setOpacity(P01i,100);

		setOpacity(P02i,100);

		

		run = false;

	}

}



function FADEIN_(p) {

	setOpacity(P1i, 100-.5*p*p);

	setOpacity(P2i, 100-.5*p*p);



	if (p == 20) {

		setOpacity(P1i, 0);

		setOpacity(P2i, 0);

		P1i.src = IMGSRC[kI].src;

		P2i.src = IMGSRC[kI].src;

		for(var i=1; i <=20; i++) 

			setTimeout("FADEIN__("+i+")", i*32);

	}

}



function FADEIN() {

	if (!run) {

		run = true;



	

		kI++;

		if (kI >= nI) kI = 0;

		titLe(kI);



		P1.style.width = "50%";

		P2.style.width = "50%";

		setOpacity(P1i, 100);

		setOpacity(P2i, 100);



		for(var i=1; i <=20; i++) 

			setTimeout("FADEIN_("+i+")", i*32);

	} else 

		setTimeout("FADEIN()", i*32);

}



</script>
不悲不喜 2008-11-03
  • 打赏
  • 举报
 回复
程序改了一下，把加了个淡入淡出的变换。

<html>

<head>

<title>xiangce </title>

<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

html {

overflow: hidden;

}

body {

	margin: 0px;

	padding: 0px;

	background: #FFFFFF;

	position: absolute;

	width: 100%;

	height: 100%;

	cursor: crosshair;

}

#center {

	position:absolute;

	left: 50%;

	top: 50%;

}

#DHTMLBOOK {

	position: relative;

	background: #000;

	width: 420px;

	height: 320px;

	left: -210px;

	top: -160px;

//	visibility: hidden;

}

#TXTBOX {

	position: absolute;

	font-family: verdana;

	color: #aba193;

	font-size: .8em;

	width: 410px;

	text-align: center;

	top: 320px;

}

.page {

	position: absolute;

	cursor: pointer;

	overflow: hidden;

	width: 50%;

	height: 100%;

	border-left: #000000 solid 0px;

}

.right {

	left: 50%;

	border-right: #000000 solid 0px;

}

.turn {

	background: #FFFFFF;

}

.img {

	position: absolute;

	height: 100%;

	width: 200%;

}

#yang{

	float:left;

	border: 2px solid #CCC;

	position: absolute;

	height: 150px;

	width: 200px;

	left: 1000px;

	top: 400px;

	right: 0px;

	bottom: 100px;

	background-color: #99CCFF;

}

#main {float:left;font-size:13px;}

#left {

	float:left;

	width:900px;

	border: 2px solid #CCC;

	margin-right:10px;

	position: absolute;

	height: 520px;

	left: 80px;

	top: 31px;

	right: 400px;

	bottom: 150px;

}

#right {

	float:left;

	border: 2px solid #CCC;

	position: absolute;

	height: 100px;

	width: 204px;

	left: 1000px;

	top: 415px;

	right: 0px;

	bottom: 100px;

}

#right2 {

	float:left;

	border: 2px solid #CCC;

	position: absolute;

	height: 300px;

	width: 204px;

	left: 1000px;

	top: 100px;

	right: 0px;

	bottom: 100px;

}

#bottom {

	float:left;

	border: 2px solid #CCC;

	position: absolute;

	height: 90px;

	width: 1260px;

	left: 0px;

	right: 0px;

	bottom: 0px;

}

#left_top {

	float:left;

	border: 2px solid #CCC;

	position: absolute;

	height: 33px;

	width: 1260px;

	top:0px;

	left: 0px;

	right: 0px;

	bottom: 0px;

}



</style>

<script language="JavaScript">

<!--

function change(imgId){

  var img = document.getElementById(imgId);

  

  if(img.filters.alpha.opacity>=100)

      clearInterval(timer);

  else

      ++img.filters.alpha.opacity;

      

}



timer=setInterval("change('photo')",50)



function next(img){



	i=kI+1;

	if(i >= nI) i = 0;

	IMGSRC[i].src = img;



	FADEIN();

}

-->

</script>
zhenai0512 2008-11-02
  • 打赏
  • 举报
 回复
<script type="text/javascript">
<!--

document.onselectstart = function () { return false; }

var nI = 0;
var kI = 0;
var run = false;

function setOpacity(obj,o) {
if (o<0) o=0; else if (o>100) o = 100;
if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
P1.style.left = 50-(2.5*p)+"%";
P1.style.width = (2.5*p)+"%";
setOpacity(P1i, .5*p*p);
if (p == 20) run = false;
}
function TPR_(p) {
P2.style.width = 50-(2.5*p)+"%";
setOpacity(P2i, 100-.5*(p*p));
if (p == 20) {
P2i.src = IMGSRC[kI].src;
setOpacity(P2i, 100);
P2.style.width = "50%";
for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
}
}
function TPR() {
if (!run) {
run = true;
P01i.src = IMGSRC[kI].src;
P1.style.width = 0;
kI++;
if (kI>=nI) kI = 0;
titLe(kI);
P02i.src = IMGSRC[kI].src;
P1i.src = IMGSRC[kI].src;
for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
} else setTimeout("TPR()", 100);
}

function TPL__(p) {
P2.style.width = (2.5*p)+"%";
setOpacity(P2i, .5*p*p);
if (p == 20) run = false;
}
function TPL_(p) {
P1.style.left = (2.5*p)+"%";
P1.style.width = 40+(10-2.5*p)+"%";
setOpacity(P1i, 100-.5*(p*p));
if (p == 20) {
P1i.src = IMGSRC[kI].src;
setOpacity(P1i, 100);
P1.style.left = 0;
P1.style.width = "50%";
for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
}
}
function TPL() {
if (!run) {
run = true;
P02i.src = IMGSRC[kI].src;
P2.style.width = 0;
kI--;
if (kI < 0) kI = nI-1;
titLe(kI);
P01i.src = IMGSRC[kI].src;
P2i.src = IMGSRC[kI].src;
for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
} else setTimeout("TPL()", 100);
}
function titLe(p) {
document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}
onload = function() {
IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
DB = document.getElementById("DHTMLBOOK");
P01 = DB.getElementsByTagName("span")[0];
P01i = P01.getElementsByTagName("img")[0];
P02 = DB.getElementsByTagName("span")[1];
P02i = P02.getElementsByTagName("img")[0];
P1 = DB.getElementsByTagName("span")[2];
P1i = P1.getElementsByTagName("img")[0];
P2 = DB.getElementsByTagName("span")[3];
P2i = P2.getElementsByTagName("img")[0];
nI = IMGSRC.length;
P1i.src = IMGSRC[kI].src;
P2i.src = IMGSRC[kI].src;
titLe(kI);
DB.style.visibility = "visible";
}
//-->
</script>
</head>

<body>

<div id="center">
<div id="DHTMLBOOK">
<span class="page" onMouseDown="return false;" onDblClick="TPL();" onClick="TPL();"><img class="img"></span>
<span class="page right" onMouseDown="return false;" onDblClick="TPR();" onClick="TPR();"><img class="img" style="left:-100%"></span>
<span class="page turn" onMouseDown="return false;" onDblClick="TPL();" onClick="TPL();"><img class="img" style="opacity:1;filter:alpha()"></span>
<span class="page turn right" onMouseDown="return false;" onDblClick="TPR();" onClick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span>
<div id="TXTBOX"></div>
</div>
</div>
<div id="imgsrc" style="visibility:hidden;">
<img alt="In the early morning he departed." src="images/img.jpg">
<img alt="Believing she had dreamed of the roar of his bike," src="images/04.jpg">
<img alt="she woke up to the sunshine in her eyelids." src="images/05.jpg">
</div>

<div id="main">
<div id="left" ><img name="photo" src="images/img.jpg" style="margin:4px;filter:alpha(opacity=0)" /></div>
<div id="left_top">???????</div>
<div id="right">
<a href="javascript:void(0)" onclick="next('images/01.jpg')"><img src="images/1.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/02.jpg')"><img src="images/2.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/03.jpg')"><img src="images/3.jpg"/></a><br><br>
<a href="javascript:void(0)" onclick="next('images/04.jpg')"><img src="images/4.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/05.jpg')"><img src="images/5.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/06.jpg')"><img src="images/6.jpg"/></a><br><br>
<a href="javascript:void(0)" onclick="next('images/07.jpg')"><img src="images/7.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/08.jpg')"><img src="images/8.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/09.jpg')"><img src="images/9.jpg"/></a>
</div>
<div id="right2">??</div>
<div id="bottom">
<a href="javascript:void(0)" onclick="TPL();"><img src="images/1.jpg"/></a>       <a href="javascript:void(0)" onclick="TPR();"><img src="images/2.jpg"/></a>       <a href="javascript:void(0)" onclick="TPL();"><img src="images/3.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/04.jpg')"><img src="images/4.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/05.jpg')"><img src="images/5.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/06.jpg')"><img src="images/6.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/07.jpg')"><img src="images/7.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/08.jpg')"><img src="images/8.jpg"/></a>       <a href="javascript:void(0)" onclick="next('images/09.jpg')"><img src="images/9.jpg"/></a>
</div>
</div>
</body>
</html>
zhenai0512 2008-11-02
  • 打赏
  • 举报
 回复
好的 下面是真个页面的代码 有点长 请大大们耐心 哦~~~~~~~~~~~~~~~~~呵呵
--------------------------------------------------------------------------------------------
<html>
<head>
<title>xiangce</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #FFFFFF;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#center {
position:absolute;
left: 50%;
top: 50%;
}
#DHTMLBOOK {
position: relative;
background: #000;
width: 420px;
height: 320px;
left: -210px;
top: -160px;
visibility: hidden;
}
#TXTBOX {
position: absolute;
font-family: verdana;
color: #aba193;
font-size: .8em;
width: 410px;
text-align: center;
top: 320px;
}
.page {
position: absolute;
cursor: pointer;
overflow: hidden;
width: 50%;
height: 100%;
border-left: #000000 solid 0px;
}
.right {
left: 50%;
border-right: #000000 solid 0px;
}
.turn {
background: #FFFFFF;
}
.img {
position: absolute;
height: 100%;
width: 200%;
}
#yang{
float:left;
border: 2px solid #CCC;
position: absolute;
height: 150px;
width: 200px;
left: 1000px;
top: 400px;
right: 0px;
bottom: 100px;
background-color: #99CCFF;
}
#main {float:left;font-size:13px;}
#left {
float:left;
width:900px;
border: 2px solid #CCC;
margin-right:10px;
position: absolute;
height: 520px;
left: 80px;
top: 31px;
right: 400px;
bottom: 150px;
}
#right {
float:left;
border: 2px solid #CCC;
position: absolute;
height: 100px;
width: 204px;
left: 1000px;
top: 415px;
right: 0px;
bottom: 100px;
}
#right2 {
float:left;
border: 2px solid #CCC;
position: absolute;
height: 300px;
width: 204px;
left: 1000px;
top: 100px;
right: 0px;
bottom: 100px;
}
#bottom {
float:left;
border: 2px solid #CCC;
position: absolute;
height: 90px;
width: 1260px;
left: 0px;
right: 0px;
bottom: 0px;
}
#left_top {
float:left;
border: 2px solid #CCC;
position: absolute;
height: 33px;
width: 1260px;
top:0px;
left: 0px;
right: 0px;
bottom: 0px;
}

</style>
<script language="JavaScript">
<!--
function change(img)
{
img=eval("document.all."+img);
if(img.filters.alpha.opacity>=100)
clearInterval(timer);
else
++img.filters.alpha.opacity;
}
timer=setInterval("change('photo')",50)
function next(img){
if(timer) clearInterval(timer);
document.all.photo.src = img;
document.all.photo.filters.alpha.opacity = 0;
timer=setInterval("change('photo')",50);
}
-->
</script>
接下面
不悲不喜 2008-11-02
  • 打赏
  • 举报
 回复
能不能把你的代码帖全呀
zhenai0512 2008-11-02
  • 打赏
  • 举报
 回复
哈哈 谢谢楼上的提醒和建议 我会看的 只是现在急切的想把这个效果弄出来 急着用呢 望知道的大大们 提示下小弟
不悲不喜 2008-11-02
  • 打赏
  • 举报
 回复
prototype是比较早的JS框架了，
和现在JS框架比较起来已经是落后了。
EXT，JQUERY，DOJO等，
哪个都比它强呀。
hengzhan 2008-11-02
  • 打赏
  • 举报
 回复
从楼主的贴子可以看出楼主可是不怎么注意学习呀，现在的js已经一日千里了，怎么还用这些老掉牙的方式呢

html中是不应该出现任何和js相关的内容的，包括onclick这类代码
长长的document.getElementById（）,你不觉得太长了，而也不好看呀

建议楼主看一下prototype,如果你看过，不想用它的东西，但它的思想还是很好的呀，就不能用上一点点？？
不悲不喜 2008-11-02
  • 打赏
  • 举报
 回复
终于明白你的问题了.
大概TPR这些程序不是你自己写的吧,
像这样把next函数改一下.

function next(img){



	i=kI+1;

	if(i >= nI) i = 0;

	IMGSRC[i].src = img;



	TPL();  //或者TPR（）；

}
zhenai0512 2008-11-02
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 syukugai 的回复:]
引用楼主 zhenai0512 的帖子:
现在的问题是：当底部导航到一张美女的全身图片时，单击右部导航实现美女的鼻子，耳朵，嘴唇显示，问题是怎么都在中间的位置显示呢？（这样的时候就会覆盖美女全身的图片，而只显示身体局部，比如鼻子）
第…


没明白，
你希望实现什么样的效果？
[/Quote]
就是下部导航到美女全身图片时，右部导航调用一张鼻子或其他部位的图片，来覆盖全身的图片，在中间的位置上显示
wtcsy 2008-11-02
  • 打赏
  • 举报
 回复
呵呵
貌似发错地方了
:( . . . . . . :( :( :( :(
wtcsy 2008-11-02
  • 打赏
  • 举报
 回复 
<textarea onClick="document.getElementById('a').onclick()"  cols="100" rows="6"></textarea>

<input value="show" id="a" type="button" onClick="alert('a')">

是不是这个意思.....
不悲不喜 2008-11-02
  • 打赏
  • 举报
 回复
[Quote=引用楼主 zhenai0512 的帖子:]
现在的问题是：当底部导航到一张美女的全身图片时，单击右部导航实现美女的鼻子，耳朵，嘴唇显示，问题是怎么都在中间的位置显示呢？（这样的时候就会覆盖美女全身的图片，而只显示身体局部，比如鼻子）
第…
[/Quote]

没明白，
你希望实现什么样的效果？
IMAGSE 2008-11-01
  • 打赏
  • 举报
 回复
友情帮顶~ 看起来有点复杂~
zhenai0512 2008-11-01
  • 打赏
  • 举报
 回复
这个问题依然在研究中，往大大们看看
mjjzg 2008-11-01
  • 打赏
  • 举报
 回复
楼主强大,估计我要学习了,支持一下,顶了
kindwell 2008-11-01
  • 打赏
  • 举报
 回复
发源代码的时候，最后能够把从<html>到</html>的全部代码发出来，保证别人
能够直接拷下来就能够预览效果的那种，不然别人还要按照你的代码一点点加足够
表示的东西，要是给的分数比较少，一般很少有人会花这个时间来看的。

另外发代码的时候最好把javascript标记
加上，带上
颜色的代码怎么着也看得更舒服点。
Android界面特效全汇总
（一）Activity 页面切换的效果  Android 2.0 之后有了 ...数，一个是前一个 activity 的退出两一个 activity 的进入， Java 代码  1. @Override  public void onCreate(Bundle savedIn
Android开发_android界面效果全汇总
（一）Activity页面切换的效果   先介绍下左右滑动切换Activity，对于复杂的手势原理一样，具体后述。 主要原理为监控触屏事件和手势事件，在触屏事件处理函数中调用手势事件处理函数，表示用户触屏后是否有手势...
Android界面特殊全汇总
（一）Activity 页面切换的效果 Android 2.0 之后有了 ...数，一个是前一个 activity 的退出两一个 activity 的进入， Java 代码 1. @Override public void onCreate(Bundle savedInstanceState) { 2. su
IP网络基础知识及原理.ppt
IP网络基础知识及原理.ppt
网络游戏运营培训资料第一讲市场推广.ppt
网络游戏运营培训资料第一讲市场推广.ppt
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章