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

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

微信小程序云开发-内容管理系统（CMS）小案例
一.前言最近有朋友问到如何在CMS上实现审核小程序端提交的数据,例如发布的内容审核,订单审核等等.因而出一篇小案例. 二.原理说明这个由腾讯开源的这个内容管理系统,实际上就是对于云开发数据库的可视 ...
JavaScript 国庆倒计时小案例
本次实现js国庆倒计时小案例开发工具与关键技术:Visual Studio 2015 JavaScript 当然首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...
JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果
手风琴效果很流行,可以任意展开收缩内容,甚是好看. 特效要求鼠标移动到图片上,当前图片放大,其他图片收缩. HTML <div class="pics"><ul ...
Javascript综合应用小案例
按需求弄了一个取词以及标红的小应用. 先上demo :http://qianduannotes.sinaapp.com/getKeyword/ 很多平时常用的东西,都用上了,所以拿出来说说. ...
Javascript综合应用小案例（续）
上一篇文章,弄了一个取词和标红功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~ Demo地址::http://qianduannotes.sinaapp.com/g ...
HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车
目录一.素材提取方法二.图标三.实现 (1)效果图 (2)图片素材 (3)代码花了三天时间将HTML4,HTML5,CSS2,CSS3大致学习了一下,现在来做一个网页实践一下,我是准备专攻后端 ...
JavaScript事件——【小案例】小人快跑
效果图: images: 操作: 按"上" "下" "左" "右" 键控制小人移动方向步骤: ...
JavaScript事件——【小案例】飞机发射子弹
效果图: 步骤: 1.规定飞机的走向 ( 键盘事件 ) 2.发射子弹 ( 子弹位置:left top ) 图片素材: 飞机:shoot/1.gif 子弹:shoot/2.png 完整代码如下: < ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...

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

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

最新文章

热门文章