php简单网络相册管理系统,Javascript实现网络相册小案例

html>

网络相册

图一

图二

图三

    

//获取全部相册链接

var a = document.getElementsByTagName('a');

//循环赋予点击事件

for(var i=0;i

a[i].onclick = function () {

// alert('123');

//获取当前a标签的href属性

var h =  this.getAttribute('href');

//获取当前a标签title属性

var str = this.getAttribute('title');

//获取图片站位元素

var img = document.getElementsByTagName('img')[0];

//获取文字站位元素

var p = document.getElementsByTagName('p')[0];

//改变文字站位内容

p.innerHTML = str;

//给图片站位元素设置属性

img.setAttribute('src',h);

//禁用a标签自带跳转属性

return false;

}

}

原理：当点击链接时，替换站位元素属性。达到网络相册目的

步骤：1.通过循环给所有a标签赋予点击事件

2.通过 this.getAttribute("属性")，获取属性值

3.通过 this.setAttribute("被替换属性名"，代替属性)

attribute 属性 attribute attribute