如何在JS的相册的图片上加上文字，不要用PS的方法

2014-02-07 04:07:15 505 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）女友的网页相册（一）一丶相册效果二丶代码总结一丶相册效果未展开前展开后相册会自动旋转，底部还有倒影哦（展开时有个很nice的动画效果~）。可以滚动鼠标轮盘放大缩小使用鼠标还可以拖动相册观看图片喔！！（ps:底部可以放上你想说的文字）二丶代码 html + css + js html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met 阅读详情

我想在相册上添加文字，但是这个文字不想用PS的方法，咋弄啊。我把几张图片放在一个DIV内的。如：
<DIV id="NO1" style="display:none"><img src="image/1.jpg" width="100" height="100"/><img src="image/2.jpg" width="100" height="100"/><img src="image/3.jpg" width="100" height="100"/><img src="image/4.jpg" width="100" height="100"/><img src="image/5.jpg" width="100" height="100" /><img src="image/6.jpg" width="100" height="100" /></DIV>
现在我想再图片上添加文字，可以吗？
我这里是翻相册的JS代码，修改后会不会起冲突？

document.onselectstart = function () { return false; }//这个页面的文字不能被鼠标选中

var n1  = 0;

var n2  = 0;

var move = false;

function setOpacity(abc,o) {//设置透明度

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

	if (abc.filters)abc.filters.alpha.opacity=o; else abc.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) move = false;

}

function TPR_(p) {

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

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

	if (p == 20) {

		P2i.src = IMGSRC[n2].src;

		setOpacity(P2i, 100);

		P2.style.width = "50%";

		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*2);

	}

}

function TPR() {

	if (!move) {

		move = true;

		P01i.src = IMGSRC[n2].src;

		P1.style.width = 0;

		n2++;

		if (n2>=n1) n2 = 0;

		titLe(n2);

		P02i.src = IMGSRC[n2].src;

		P1i.src  = IMGSRC[n2].src;

		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*2);

	} else setTimeout("TPR()", 100);

}

function TPL__(p) {

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

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

	if (p == 20) move = 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[n2].src;

		setOpacity(P1i, 100);

		P1.style.left  = 0;

		P1.style.width = "50%";

		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*2);//settimeout后面的函数是1000:1

	}

}

function TPL() {//变速移动到位置

	if (!move) {

		move = true;

		P02i.src = IMGSRC[n2].src;

		P2.style.width = 0;

		n2--;

		if (n2 < 0) n2 = n1-1;

		titLe(n2);

		P01i.src = IMGSRC[n2].src;

		P2i.src  = IMGSRC[n2].src;

		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*2);

	} else setTimeout("TPL()", 100);

var IMGSRC;  			

	function titLe(p) {//显示图片提示信息

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

};  

    function d(id){

    document.getElementById(id).style.visibility="visible"

}

	function h(id){

    document.getElementById(id).style.visibility="hidden"

}

	function show(id){//定义ID的值

    IMGSRC  = document.getElementById(id).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];

	n1      = IMGSRC.length;

	P1i.src = IMGSRC[n2].src;

	P2i.src = IMGSRC[n2].src;

	titLe(n2);

	DB.style.visibility = "visible";

}